网页计算器一个JS计算器_其他特效-js教程-PHP中文网

网页计算器一个JS计算器_其他特效

php中文网

发布： 2016-05-16 17:23:48

原创

1643人浏览过

一个挺小的JavaScript网页计算器，界面美化的我想还是不错的，毕竟在没有使用任何图片修饰的情况下，很好看，而且功能挺实用，可以完成基本的数学算数运算，点击“运行代码”可以运行一下看效果。

5ECRM2004 加密版

一款客户关系管理系统，公共管理包含计算器、万年历、通讯簿、单位转算、邮编区号，个人管理包含计划、公文、档案、分析、资金管理，综合管理包含通告、计划、档案、商品、工资，去处管理包含厂商、客户、采购、销售、售后管理，分析管理包含采购、销售、利润、售后分析及其他的基础管理

查看详情

<title>计算器</title>
<script> 
<!-- 
willclear=false //这个变量作为下一次输入是否先清空输入框的状态标志 
function backspace(){ //退格 
Calc.Input.value = Calc.Input.value.substring(0,Calc.Input.value.length-1) 
Calc.Input.title = Calc.Input.value.substring(0,Calc.Input.title.length-1) 
}//取长度为原长度减一的串，实现退格效果。 
function addoperator(){ //加操作符 
if (willclear){ //如果这次输入前需要清空输入框 
willclear=false //先清除标志，避免下次再次被错误地重复清空 
clearinput() //清除输入内容 
} 
Calc.Input.value += event.srcElement.innerText //给用于显示的加上刚输入的运算符 
Calc.Input.title += event.srcElement.name //给用于计算的表达式区加上刚输入的运算符 
}

function clearinput(){ //清除输入 
Calc.Input.value='' //清空显示区 
Calc.Input.title='' //清空表达式 
}

function result(){ //用于计算结果 
Calc.Input.value = eval(Calc.Input.title)//执行表达式区的表达式，返回结果到显示区。 
willclear=true//设定下次按键则先清除此次计算结果。 
} 
//--> 
</script><style> 
button {width:40; border: 1 solid #808080;background-color: #FFFFFF} 
</style>
<form name="Calc"> 
<table border="4" bordercolorlight="#808080" bordercolor="#808080" width="250" height="38">
<tr><td width="291" height="39" bgcolor="#C0C0C0"> 
  
<input type="text" name="Input" readonly size="21" style="background-color: #F5F5F5; font-family: Arial; border: 1 solid #000000">  
<button name="back" onclick="backspace()">←</button> 
</td></tr>
<tr><td width="291" height="38"> 
<table border="0" width="100%" height="105" cellpadding="0">
<tr>
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="1" onclick="addoperator()">1</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="2" onclick="addoperator()">2</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="3" onclick="addoperator()">3</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="+" onclick="addoperator()">+</button> 
</td> 
</tr>
<tr>
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="4" onclick="addoperator()">4</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="5" onclick="addoperator()">5</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="6" onclick="addoperator()">6</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="-" onclick="addoperator()">-</button> 
</td> 
</tr>
<tr>
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="7" onclick="addoperator()">7</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="8" onclick="addoperator()">8</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="9" onclick="addoperator()">9</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="*" onclick="addoperator()">×</button> 
</td> 
</tr>
<tr>
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="clear" onclick="clearinput()">C</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="0" onclick="addoperator()">0</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="=" onclick="result()">=</button> 
</td> 
<td width="25%" height="31" align="center" bgcolor="#C0C0C0"> 
<button name="/" onclick="addoperator()">÷</button> 
</td> 
</tr>
</table>
</td></tr>
</table>
</form>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]