今天尝试写了简单的计算器，复习了表格，table，tr，td 合并单元格colspan=" " rowspan=" ",合并表格边框 cellspacing="0" cellpadding="5" js内置函数eval()可以自动计算出结果;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
</head>
<style type="text/css">
table{border:1px solid #0CF;}
input{
border:none;
background:none;
color:#fff;
font-size:22px;
}
td{text-align:center;}
</style>
<body>
<div>
<table border="1" align="center" bgcolor="#0099CC" cellspacing="0" cellpadding="5">
<tr>
<td colspan="4"><input id="numMessage" type="text" value=""/></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="onclickNum(1)"/></td>
<td><input type="button" value="2" onclick="onclickNum(2)"/></td>
<td><input type="button" value="3" onclick="onclickNum(3)"/></td>
<td><input type="button" value="+" onclick="onclickNum('+')"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="onclickNum(4)"/></td>
<td><input type="button" value="5" onclick="onclickNum(5)"/></td>
<td><input type="button" value="6" onclick="onclickNum(6)"/></td>
<td><input type="button" value="-" onclick="onclickNum('-')"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="onclickNum(7)"/></td>
<td><input type="button" value="8" onclick="onclickNum(8)"/></td>
<td><input type="button" value="9" onclick="onclickNum(9)"/></td>
<td><input type="button" value="*" onclick="onclickNum('*')"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="0" onclick="onclickNum(0)"/></td>
<td><input type="button" value="." onclick="onclickNum('.')"/></td>
<td><input type="button" value="/" onclick="onclickNum('/')"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Del" onclick="onclickClear()"/></td>
<td colspan="2"><input type="button" value="=" onclick="onclickResult()"/></td>
</tr>
</table>
<script>
var numMessage;
var numResult;
function onclickNum(nums){
numMessage = document.getElementById("numMessage");
numMessage.value += nums;
}
function onclickClear(){
numMessage.value="";
}
function onclickResult(){
numResult = eval(numMessage.value);
numMessage.value = numResult;
}
</script>
</div>
</body>
</html>