用javascript做一个计算器怎样才能让数字按键上的数字显示在上面的文本框中
2条回答 默认 最新
- threenewbee 2015-12-27 14:34关注
参考这个完整的例子
<html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
- ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
- ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
- ¥30 3天&7天&&15天&销量如何统计同一行
- ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
- ¥15 C#调用python代码(python带有库)
- ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
- ¥15 vs2019中数据导出问题
- ¥20 云服务Linux系统TCP-MSS值修改?
- ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)