效果图：
刚开始做时没考虑到清零和退格两个功能，嘻嘻，后来加的整体与传统计算器比有点小瑕疵。
代码：
<!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 id="input" type="text"> <div id="container"> <div> <button>1</button> <button>2</button> <button>3</button> <button>+</button> </div> <div> <button>4</button> <button>5</button> <button>6</button> <button>-</button> </div> <div> <button>7</button> <button>8</button> <button>9</button> <button>*</button> </div> <div> <button>0</button> <button>.</button> <button>=</button> <button>/</button> </div> </div> <button>清零</button> <button>退格</button> </body> </html>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
【Javascript 实现简单计算器实例代码】相关文章：
★ Javascript递归打印Document层次关系实例分析