用JS写的简单的计算器实现代码

(编辑：jimmy 日期: 2026/1/19 浏览：2)

1.本页效果图片

2.美化后的效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>  <style> #main{ width:100%; height:100%; } #inputs{ position:relative; top:50%; left:50%; } .inbutton{ width:30px; } .outbutton{ width:145px; text-align:right; } .tcenter{ text-align:center; } </style> </head> <body>   etongchina@gmail.com   <input id="output" type="text" class="outbutton" maxlength="9" value="." />   <input type="button" class="inbutton" value="7" onclick="commonMath.getValue(this.value)" /> <input type="button" class="inbutton" value="8" onclick="commonMath.getValue(this.value)" /> <input type="button" class="inbutton" value="9" onclick="commonMath.getValue(this.value)" /> <input type="button" class="inbutton" value="+" onclick="commonMath.getValue(this.value)" />   <input type="button" class="inbutton" value="4" onclick="commonMath.getValue(this.value);" /> <input type="button" class="inbutton" value="5" onclick="commonMath.getValue(this.value);" /> <input type="button" class="inbutton" value="6" onclick="commonMath.getValue(this.value);" /> <input type="button" class="inbutton" value="-" onclick="commonMath.getValue(this.value);" />   <input type="button" class="inbutton" value="1" onclick="commonMath.getValue(this.value);" /> <input type="button" class="inbutton" value="2" onclick="commonMath.getValue(this.value);" /> <input type="button" class="inbutton" value="3" onclick="commonMath.getValue(this.value);" /> <input type="button" class="inbutton" value="*" onclick="commonMath.getValue(this.value);" />   <input type="button" class="inbutton" value="0" onclick="commonMath.getValue(this.value);" /> <input type="button" class="inbutton" value="+/-" onclick="commonMath.getValue(this.value);" /> <input type="button" class="inbutton" value="." onclick="commonMath.getValue(this.value);" /> <input type="button" class="inbutton" value="/" onclick="commonMath.getValue(this.value);" />   <input type="button" class="outbutton tcenter" value="计算" onclick="commonMath.getValue('=');" />   </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：javascript 数组操作实用技巧

下一篇：prototype与jquery下Ajax实现的差别