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

1.本页效果图片

2.美化后的效果

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <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> <div id="main"> <div> <span class="outbutton tcenter">[e-mail]</span> </div> <div> <span><input id="output" type="text" class="outbutton" maxlength="9" value="."></span> </div> <div> <span><input type="button" class="inbutton" value="7" onclick="commonMath.getValue(this.value)"></span> <span><input type="button" class="inbutton" value="8" onclick="commonMath.getValue(this.value)"></span> <span><input type="button" class="inbutton" value="9" onclick="commonMath.getValue(this.value)"></span> <span><input type="button" class="inbutton" value="+" onclick="commonMath.getValue(this.value)"></span> </div> <div> <span><input type="button" class="inbutton" value="4" onclick="commonMath.getValue(this.value);"></span> <span><input type="button" class="inbutton" value="5" onclick="commonMath.getValue(this.value);"></span> <span><input type="button" class="inbutton" value="6" onclick="commonMath.getValue(this.value);"></span> <span><input type="button" class="inbutton" value="-" onclick="commonMath.getValue(this.value);"></span> </div> <div> <span><input type="button" class="inbutton" value="1" onclick="commonMath.getValue(this.value);"></span> <span><input type="button" class="inbutton" value="2" onclick="commonMath.getValue(this.value);"></span> <span><input type="button" class="inbutton" value="3" onclick="commonMath.getValue(this.value);"></span> <span><input type="button" class="inbutton" value="*" onclick="commonMath.getValue(this.value);"></span> </div> <div> <span><input type="button" class="inbutton" value="0" onclick="commonMath.getValue(this.value);"></span> <span><input type="button" class="inbutton" value="+/-" onclick="commonMath.getValue(this.value);"></span> <span><input type="button" class="inbutton" value="." onclick="commonMath.getValue(this.value);"></span> <span><input type="button" class="inbutton" value="/" onclick="commonMath.getValue(this.value);"></span> </div> <div> <span><input type="button" class="outbutton tcenter" value="计算" onclick="commonMath.getValue('=');"></span> </div> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]