JavaScript基于DOM操作实现简单的数学运算功能示例
本文实例讲述了JavaScript基于DOM操作实现简单的数学运算功能。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metacharset="utf-8">
<title>简单的DOM操作-实现简单的运算</title>
<scripttype="text/javascript"language="javascript">
window.onload=function(){
//alert("window.onload!!!");
varopNum1=window.document.getElementById("opNum1");
varopNum2=window.document.getElementById("opNum2");
//varop=window.document.getElementById("op");
varbtnElements=window.document.getElementsByName("operater");//.getElementsByTagName("input[type=button]");
varbtnElementsLength=btnElements.length;
for(vari=0;i<btnElementsLength;i++){
//alert(i);
btnElements[i].onclick=function(){
//alert(opNum1.value+"_"+opNum2.value+"_"+this.value);
operate(opNum1.value,opNum2.value,this.value);
}
}
}
functionoperate(opNum1,opNum2,op){
varresult=null;
switch(op){
case"+":result=parseFloat(opNum1)+parseFloat(opNum2);
break;
case"-":result=parseFloat(opNum1)-parseFloat(opNum2);
break;
case"*":result=parseFloat(opNum1)*parseFloat(opNum2);
break;
case"/":result=parseFloat(opNum1)/parseFloat(opNum2);
break;
case"%":result=parseFloat(opNum1)%parseFloat(opNum2);
break;
default:
break;
}
varresultElement=window.document.getElementById("resultSpan");
resultElement.innerHTML=result;
}
</script>
<styletype="text/css">
body{line-height:30px;
font-size:20px;
}
input[type=button]{width:50px;
}
</style>
</head>
<body>
运算数1：<inputtype="text"id="opNum1"/><br/>
运算数2：<inputtype="text"id="opNum2"/><br/>
选择操作符：
<inputtype="button"name="operater"value="+"/>
<inputtype="button"name="operater"value="-"/>
<inputtype="button"name="operater"value="*"/>
<inputtype="button"name="operater"value="/"/>
<inputtype="button"name="operater"value="%"/>
<br/>
运算结果为：<spanid="resultSpan"></span><br/>
</body>
</html>
PS：这里再为大家推荐几款计算工具供大家进一步参考借鉴：
在线一元函数（方程）求解计算工具：
http://tools.jb51.net/jisuanqi/equ_jisuanqi
科学计算器在线使用_高级计算器在线计算：
http://tools.jb51.net/jisuanqi/jsqkexue
在线计算器_标准计算器：
http://tools.jb51.net/jisuanqi/jsq
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript替换操作技巧总结》、《javascript编码操作技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。