你的位置:首页 > Java教程

[Java教程]javascript简单计算器代码分析


javascript简单计算器代码分析:
也许网页中需要一个简单的计算器功能,这个时候就要掌握如何编写,起码应该会修改,下面就通过一个简单的实例介绍一下如何实现简单的计算器效果,代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>简单计算器代码实例-蚂蚁部落</title><style type="text/css">body{ font-size:12px; color:#333;}ul input{ border:#ccc 1px solid; border-right:#e2e2e2 1px solid; border-bottom:#e2e2e2 1px solid; height:15px; line-height:15px; padding:3px;}</style><script type="text/javascript"> function calculate(type,result,first,second){ var num=0;  firstValue=Number(first.value); secondValue=Number(second.value);  if(firstValue==""||secondValue==""){  return false; } switch(type){  case 0:num=firstValue+secondValue;break;  case 1:num=firstValue-secondValue;break;  case 2:num=firstValue*secondValue;break;   case 3:num=firstValue/secondValue;break;   case 4:num=firstValue%secondValue;break;  }  result.value=num;} window.onload=function(){ var result=document.getElementById("result");   var reduce=document.getElementById("reduce"); var multiplication=document.getElementById("multiplication"); var division=document.getElementById("division"); var mod=document.getElementById("mod");   var first=document.getElementById("first"); var second=document.getElementById("second");   result.onfocus=function(){this.select()} result.onclick=function(){calculate(0,result,first,second)} reduce.onclick=function(){calculate(1,result,first,second)} multiplication.onclick=function(){calculate(2,result,first,second)} division.onclick=function(){calculate(3,result,first,second)} mod.onclick=function(){calculate(4,result,first,second)}}</script></head><body><ul> <li>第一个数:<input type="text" size="10" id="first"/></li> <li>第二个数:<input type="text" size="10" id="second"/></li> <li>计算结果:<input type="text" size="10" id="result" value="+" /></li></ul><input type="button" class="btn" value="–" id="reduce"/><input type="button" class="btn" value="×" id="multiplication"/><input type="button" class="btn" value="÷" id="division"/><input type="button" class="btn" value="%" id="mod"/></body></html>

以上代码实现了简单的计算器功能,能够实现简单的算术运算,下面就简单介绍一下实现过程。
一.实现原理:
原理超级简单,就是为按钮注册一个onclick事件处理函数,并且传递相应的参数,就可以按照按钮value属性所标注的运算方式进行相应的算术运算,就这么简单,这里就不多介绍了,可以参考相关阅读即可。
二.相关阅读:
1.Number()函数可以参阅javascript的Number()方法一章节。
2.switch语句可以参阅javascript的switch语句一章节。
3.onfocus事件可以参阅javascript的onfocus事件一章节。
4.select()函数可以参阅javascript的text.select()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9114

更多内容可以参阅:http://www.softwhy.com/javascript/