<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
</head>
<style>
*{ font-size:18px;}
#t{ 210px; height:40px;}
.shaw{ 70px; height:40px;}
.equal{ 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";//显示0
flag=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>