<!doctype html>
<html> <head> <meta charset="utf-8"> <title>计算器</title> </head> <style>*{ font-size:18px;} #t{ width:210px; height:40px;}.shaw{ width:70px; height:40px;}.equal{ width:70px; height:80px;} </style><script>var flag=true; //设置标志，用于没有输入时显示0，以及有显示时清空 function func(str){ var t=document.getElementById("t"); if(flag){ t.value=""; //清除没有输入时的0}flag=false; //改变状态，不再清空内容t.value=t.value+str;//将之前的内容和输入的内容相加，重新显示}
function backspace(){//回退一个数，相当于撤销var t=document.getElementById("t");t.value=t.value.substr(0,t.value.length-1);//字符串的截取，从0到字符串的长度-1} function AC(){//清空显示内容var t=document.getElementById("t");t.value="0";//显示0flag=true;//让下次输入可以清空0}function equals(){//计算结果var t=document.getElementById("t");t.value=eval(t.value);//将字符串转换为逻辑运算} </script><body> <!-- 内边距 外边距 边框 居中--><table cellpadding="0" cellspacing="0" border="1" align="center"> <caption><h3>计算器</h3></caption> <tr> <td colspan="3"><input type="text" value="0" id="t"/></td> <td><input type="button" class="shaw" value="回退" onClick="backspace()"/></td> <td><input type="button" class="shaw" value="清除" onClick="AC()"/></td> </tr> <tr> <td><input type="button" class="shaw" value="7" onClick="func('7')"/></td> <td><input type="button" class="shaw" value="8" onClick="func('8')"/></td> <td><input type="button" class="shaw" value="9" onClick="func('9')"/></td> <td><input type="button" class="shaw" value="/" onClick="func('/')"/></td> <td><input type="button" class="shaw" value="(" onClick="func('(')"/></td> </tr> <tr> <td><input type="button" class="shaw" value="4" onClick="func('4')"/></td> <td><input type="button" class="shaw" value="5" onClick="func('5')"/></td> <td><input type="button" class="shaw" value="6" onClick="func('6')"/></td> <td><input type="button" class="shaw" value="*" onClick="func('*')"/></td> <td><input type="button" class="shaw" value=")" onClick="func(')')"/></td> </tr> <tr> <td><input type="button" class="shaw" value="1" onClick="func('1')"/></td> <td><input type="button" class="shaw" value="2" onClick="func('2')"/></td> <td><input type="button" class="shaw" value="3" onClick="func('3')"/></td> <td><input type="button" class="shaw" value="-" onClick="func('-')"/></td> <td rowspan="2"><input type="button" value="=" class="equal" onClick="equals()"/></td> </tr> <tr> <td><input type="button" class="shaw" value="0" onClick="func('0')"/></td> <td><input type="button" class="shaw" value="." onClick="func('.')"/></td> <td><input type="button" class="shaw" value="00" onClick="func('00')"/></td> <td><input type="button" class="shaw" value="+" onClick="func('+')"/></td> </tr> </table> </body></html>