欢迎来到我爱模板网，请记住我们的域名5imoban.net。本站资源大部分免费下载。如需定制，可联系站长QQ543031222。如果您觉得本站不错，请推荐给您的好友！
各位热心的网友们，欢迎给本站留言！您的任何建议和意见本站都会认真查看，仔细采纳！
<html> <head> <title>简单的JS计算器-我爱模板网 www.5imoban.net</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--js代码可以放置在任意位置，按照先后顺序依次执行 一般放在head标签之间--> <script type="text/javascript"> /* 定义一个Calculator类*/ function Calculator(){ this.jisuan=function(num1,num2,oper){ var res=0; switch(oper){ case "+": res=num1+num2; break; case "-": res=num1-num2; break; case "*": res=num1*num2; break; case "/": res=num1/num2; break; } return res; } } //创建对象 var calculator=new Calculator(); /*定义全局变量*/ var val=0; //放置输入的值 var xval=0;//保存转换Number类型的值 var temp=0; //保存第一次输入的值 var oper="";//保存输入的操作符 /*获取输入数字*/ function inputEvent(e){ val=e.value var xsval=document.getElementById("inp1"); xsval.value+=val; //连续输入数字(String类型) //转换Number类型 xval=parseFloat(xsval.value); } /*获取第一行的数据*/ function inputPCB(e){ //window.alert(e.value); var xsval=document.getElementById("inp1"); if(e.value=="Clear"){ xsval.value=""; }else if(e.value=="Back"){ /*这个功能还没有实现，有兴趣的朋友可以自己做一做*/ }else if(e.value=="POWER"){ //计算平方 xsval.value=Math.pow(xsval.value,2); } } /*输入操作符*/ function inputOper(e){ oper=e.value; //window.alert(typeof oper); //oper=oper.substr(0); if (e.value=="+"){ var xsval=document.getElementById("inp1"); //保存上次计算结果，并对字符串进行转换Number类型 temp=parseFloat(xsval.value); //第一次输入的值设置为空 xsval.value=""; }else if(e.value=="-"){ var xsval=document.getElementById("inp1"); temp=parseFloat(xsval.value); xsval.value=""; }else if(e.value=="*"){ var xsval=document.getElementById("inp1"); temp=parseFloat(xsval.value); xsval.value=""; }else if(e.value=="/"){ var xsval=document.getElementById("inp1"); temp=parseFloat(xsval.value); xsval.value=""; } } /*计算结果*/ function inputEquel(e){ var xsval=document.getElementById("inp1"); if(e.value=="="){ //window.alert(xval); //调用对象方法 xsval.value=calculator.jisuan(temp,xval,oper); } } </script> <!--css 样式--> <style> input{ width:60px; } #inp1{ width:280px; text-align:right; } </style> </head> <body> <table border="1"> <!--显示结果行--> <tr><td colspan="4"><input id="inp1" type="text" value="" name="xianshi"/></td></tr> <!--第一行--> <tr><td><input type="button" value="POWER" onclick="inputPCB(this)"/></td><td><input type="button" value="Clear" onclick="inputPCB(this)"/></td><td><input type="button" value="Back"onclick="inputPCB(this)"/></td><td></td></tr> <!--第二行--> <tr><td><input type="button" value="1" onclick="inputEvent(this)"/></td><td><input type="button" value="2" onclick="inputEvent(this)"/></td><td><input type="button"value="3" onclick="inputEvent(this)"/></td><td><input type="button" value="4" onclick="inputEvent(this)"/></td></tr> <!--第三行--> <tr><td><input type="button" value="5" onclick="inputEvent(this)"/></td><td><input type="button" value="6" onclick="inputEvent(this)"/></td><td><input type="button"value="7" onclick="inputEvent(this)"/></td><td><input type="button" value="8" onclick="inputEvent(this)"/></td></tr> <!--第四行--> <tr><td><input type="button" value="9" onclick="inputEvent(this)"/></td><td><input type="button" value="0" onclick="inputEvent(this)"/></td><td><input type="button"value="." onclick="inputEvent(this)"/></td><td><input type="button" value="=" onclick="inputEquel(this)"/></td></tr> <!--第五行--> <tr><td><input type="button" value="+" onclick="inputOper(this)"/></td><td><input type="button" value="-" onclick="inputOper(this)"/></td><td><input type="button"value="*" onclick="inputOper(this)"/></td><td><input type="button" value="/" onclick="inputOper(this)"/></td></tr> </table> </body> </html> 提示：您可以先修改部分代码再运行
一款简单的js计算器，可以拿来练练手，运行下面代码查看计算器效果：
