【一】代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
input{
width: 100%;
}
td:hover {background-color: blue; color: white;}
</style>
<script type="text/javascript">
var numresult;
var str;
function onclicknum(nums) {
str = document.getElementById("nummessege");
str.value = str.value + nums;
}
function onclickclear() {
str = document.getElementById("nummessege");
str.value = "";
}
function onclickresult() {
str = document.getElementById("nummessege");
numresult = eval(str.value);
str.value = numresult;
}
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<td colspan="4"><input style="height:50px;width: 200px" type="text" id="nummessege"></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" value="7" id="7" onclick="onclicknum(7)"></td>
<td><input type="button" value="8" id="8" onclick="onclicknum(8)"></td>
<td><input type="button" value="9" id="9" onclick="onclicknum(9)"></td>
<td><input type="button" value="+" id="add" onclick="onclicknum('+')"></td>
</tr>
<tr>
<td><input type="button" value="4" id="4" onclick="onclicknum(4)"></td>
<td><input type="button" value="5" id="5" onclick="onclicknum(5)"></td>
<td><input type="button" value="6" id="6" onclick="onclicknum(6)"></td>
<td><input type="button" value="-" id="sub" onclick="onclicknum('-')"></td>
</tr>
<tr>
<td><input type="button" value="1" id="1" onclick="onclicknum(1)"></td>
<td><input type="button" value="2" id="2" onclick="onclicknum(2)"></td>
<td><input type="button" value="3" id="3" onclick="onclicknum(3)"></td>
<td><input type="button" value="*" id="rid" onclick="onclicknum('*')"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="0" id="0" onclick="onclicknum(0)"></td>
<td><input type="button" value="." id="point" onclick="onclicknum('.')"></td>
<td><input type="button" value="/" id="dev" onclick="onclicknum('/')"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><input type="button" value="Del" id="clear" onclick="onclickclear()"></td>
<td colspan="2"><input type="button" value="=" id="equal" onclick="onclickresult()"></td>
</tr>
</tfoot>
</table>
</body>
</html>【二】输出样例
