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程序设计有所帮助。