Javascript 实现简单计算器实例代码
2016-11-23 16:38:54
Javascript简单计算器
效果图：
刚开始做时没考虑到清零和退格两个功能，嘻嘻，后来加的整体与传统计算器比有点小瑕疵。
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js简单计算器</title> <style type="text/css"> *{ margin:0px; padding:0px; } input{ margin-top:2px; margin-left:2px; width:230px; height:30px; text-align:right; } button{ margin-top:2px; margin-left:2px; width:50px; height:50px; } #container{ margin-left:1px; border:1px solid #E4E4E4; background:#BBBBBB; width:235px; height:215px; } </style> <script> function onLoad(){ //加载完毕后光标自动对应到输入框 document.getElementById("input").focus(); } //读取按钮的值，传给输入框 function inputEvent(e){ //把val的值改为每个事件的innerHTML值 var val=e.innerHTML; //获取input标签 var xsval=document.getElementById("input"); //标签里的value连接每个事件的innerHTML值 xsval.value+=val; } //计算出结果 function inputOper(){ var xsval=document.getElementById("input"); xsval.value=eval(document.getElementById("input").value); } //清零 function clearNum(){ var xsval=document.getElementById("input"); xsval.value=""; document.getElementById("input").focus(); } //退格 function backNum(){ var arr=document.getElementById("input"); arr.value=arr.value.substring(0,arr.value.length-1); } </script> </head> <body onload="onLoad()"> <input type="text"> <div> <div> <button onclick="inputEvent(this)">1</button> <button onclick="inputEvent(this)">2</button> <button onclick="inputEvent(this)">3</button> <button onclick="inputEvent(this)">+</button> </div> <div> <button onclick="inputEvent(this)">4</button> <button onclick="inputEvent(this)">5</button> <button onclick="inputEvent(this)">6</button> <button onclick="inputEvent(this)">-</button> </div> <div> <button onclick="inputEvent(this)">7</button> <button onclick="inputEvent(this)">8</button> <button onclick="inputEvent(this)">9</button> <button onclick="inputEvent(this)">*</button> </div> <div> <button onclick="inputEvent(this)">0</button> <button onclick="inputEvent(this)">.</button> <button onclick="inputOper(this)">=</button> <button onclick="inputEvent(this)">/</button> </div> </div> <button onclick="clearNum()">清零</button> <button onclick="backNum()">退格</button> </body> </html>感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
《Javascript 实现简单计算器实例代码》阅读地址：http://www.haoshilao.net/12453/
已有0条评论，点击查看发表评论