源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

简易js代码实现计算器操作

  • 时间:2021-04-05 02:30 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:简易js代码实现计算器操作
[url=] <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>
[img]http://files.jb51.net/file_images/article/201304/20130415zjx01.png[/img] [b]PS:这里再为大家推荐两款本站的在线计算器,都是采用js实现,且功能强大,相信对于大家深入了解JavaScript数学运算及web设计会有所帮助:[/b] [b]在线标准计算器:[/b]http://tools.jb51.net/jisuanqi/jsq[/url] [b]在线科学计算器:[/b][url=http://tools.jb51.net/jisuanqi/jsqkexue]http://tools.jb51.net/jisuanqi/jsqkexue[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部