简易js代码实现计算器操作
2013-04-15 00:00
1136 查看
<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>
相关文章推荐
- 简易js代码实现计算器操作
- javaScript实现简易的计算器
- 一个简易的8位计算器,可实现加减乘除,testbench写的较为简易,代码覆盖率有点低。方法比较笨,综合之后的频率不高。
- C++ 简易string类实现(四)-自动操作引用次数
- 超级简易的JS计算器实例讲解(实现加减乘除)
- PHP简易表单验证与简易留言板实例扩展-V1.0(实现分页操作)
- JavaScript实现一个简易的计算器实例代码
- 计算器之C++简易实现
- 点击超链接执行js代码实现确认操作
- 使用表达式树+反射实现简易ORM对象映射操作
- JS实现简易的计算器
- Python简易项目 加减计算器的实现
- java代码实例 使用switch实现简易的计算器(实现加减乘除)
- JS实现计算器(简易版)_作业1
- 简易的JS计算器实现代码
- java代码实例 使用switch实现简易的计算器(实现加减乘除)
- 简单工厂模式——MFC计算器实现(连续操作)
- 【iOS开发】简易加法计算器的实现
- 利用回调函数实现一个计算器,实现加减乘除操作
- 用C语言堆栈操作的计算器的实现(输入输出流使用的C++)