实现代码:
<html>
<head>
<meta charset="utf-8">
<title>简易计算器</title>
<style type="text/css">
input[type=button]{
height: 60px;
width: 60px;
align
}
input[type=text]{
width: 250px;
text-align: right;
}
</style>
<script type="text/javascript">
function getValue(obj){
var inp = document.getElementById("inp");
if(obj.value == "="){
inp.value = eval(inp.value);
}else if(obj.value=="c"){
inp.value = "";
}else{
inp.value =inp.value+obj.value;
}
}
</script>
</head>
<body>
<table border="1px" cellspacing="0px" height="300px" width="260px" align="center">
<tr>
<td colspan="4"><input type="text" name="" id="inp" value="" /></td>
</tr>
<tr>
<td><input type="button" name="" id="" value="7" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="8" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="9" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="+" onclick="getValue(this)"/></td>
</tr>
<tr>
<td><input type="button" name="" id="" value="4" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="5" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="6" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="-" onclick="getValue(this)"/></td>
</tr>
<tr>
<td><input type="button" name="" id="" value="1" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="2" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="3" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="c" onclick="getValue(this)"/></td>
</tr>
</tr>
<tr>
<td><input type="button" name="" id="" value="0" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="*" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="/" onclick="getValue(this)"/></td>
<td><input type="button" name="" id="" value="=" onclick="getValue(this)"/></td>
</tr>
</table>
</body>
</html>
运行效果: