最终实现的效果图
源码
<!doctype html><html><head><meta charset="utf-8"><title>Calculator</title></head><style>*{font-size:36px;}#t{width:480px;height:80px;text-align: right;font-size: 48px;background-color: #F9F0DA;}.number{width:120px; height:80px;background-color:#B46381;margin: 0;display: block;}.signs{width:120px; height:80px;background-color: #A3D0C3;margin: 0;display: block;}.shaw{width:120px; height:80px;background-color: #DABB52;margin: 0;display: block;}.equal{width:120px; height:80px;background-color: #F15B42;margin: 0;display: block;}.kuohao{width: 60px;height: 80px;float: left;align-self: 0;background-color: #DABB52;}table td,table th{border:1px solid #cad9ea; }table tr:nth-child(odd){background: #fff;}</style><script>//设置标志，用于没有输入时显示0，以及有显示时清空var flag=true; function func(str){var t=document.getElementById("t");if(flag){//清除没有输入时的0t.value=""; }//改变状态，不再清空内容flag=false; //将之前的内容和输入的内容相加，重新显示t.value=t.value+str;}//回退一个数，相当于撤销function backspace(){var t=document.getElementById("t");t.value=t.value.substr(0,t.value.length-1);}//清空显示内容function AC(){var t=document.getElementById("t");//显示0t.value="0";//让下次输入可以清空0flag=true;}//计算结果function equals(){var t=document.getElementById("t");//将字符串转换为逻辑运算t.value=eval(t.value);}</script><body><!-- 内边距外边距 边框 居中--><table cellpadding="0" cellspacing="0" border="0" align="center" ><tr><td colspan="4"><input type="text" value="0" id="t" /></td> </tr><tr><td><input type="button" class="number" value="7" onClick="func('7')"/></td><td><input type="button" class="number" value="8" onClick="func('8')"/></td><td><input type="button" class="number" value="9" onClick="func('9')"/></td><td><input type="button" class="signs" value="/" onClick="func('/')"/></td> </tr><tr><td><input type="button" class="number" value="4" onClick="func('4')"/></td><td><input type="button" class="number" value="5" onClick="func('5')"/></td><td><input type="button" class="number" value="6" onClick="func('6')"/></td><td><input type="button" class="signs" value="*" onClick="func('*')"/></td></tr><tr><td><input type="button" class="number" value="1" onClick="func('1')"/></td><td><input type="button" class="number" value="2" onClick="func('2')"/></td><td><input type="button" class="number" value="3" onClick="func('3')"/></td><td><input type="button" class="signs" value="-" onClick="func('-')"/></td></tr><tr><td><input type="button" class="number" value="0" onClick="func('0')"/></td><td><input type="button" class="shaw" value="." onClick="func('.')"/></td><td><input type="button" class="number" value="00" onClick="func('00')"/></td><td><input type="button" class="signs" value="+" onClick="func('+')"/></td></tr><tr><td><input type="button" class="kuohao" value="(" onClick="func('(')"/><input type="button" class="kuohao" value=")" onClick="func(')')"/></td><td><input type="button" class="shaw" value="后退" style="float:top" onClick="backspace()"/></td><td><input type="button" class="shaw" value="清除" onClick="AC()"/></td><td rowspan="2"><input type="button" value="=" class="equal" onClick="equals()"/></td></tr></table></body></html>
