效果图：
代码如下：
键盘按键支持0-9的数字键和 + - * /运算符号键。
回车键即为=键。
Backspace键即为归零和删除最后一位键。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
font-family: "微软雅黑";
}
.StandardTd {
height: 70px;
width: 100px;
font-size: 35px
}
.BigTd {
height: 70px;
width: 100%;
font-size: 35px
}
.Table {
height: 350px;
margin-left: 50px;
}
.Input {
height: 90px; width: 395px; font-size: 50px;text-align: right;padding-right: 10px;
}
</style>
<script type="text/javascript">
var numresult,
str,
isNotCal = false // 是否已经进行过计算
function onclicknum(nums) {
//console.log(nums)
str = document.getElementById("nummessege")
if(isNotCal == true) {
str.value = ""
}
str.value = str.value + nums
isNotCal = false
}
function onclickclear() {
str = document.getElementById("nummessege")
str.value = ""
}
function onclickresult() {
isNotCal = true
str = document.getElementById("nummessege")
str.value = str.value.replace(/×/g, '*')
str.value = str.value.replace(/÷/g, '/')
numresult = eval(str.value)
str.value = numresult
}
function onclickDelete() {
if(isNotCal == false) {
str = document.getElementById("nummessege")
str.value = str.value.substr(0, str.value.length - 1)
} else {
onclickclear()
}
// console.log("清除最后一位")
}
// 监听键盘事件
document.onkeydown = function(e) {
// console.log(e)
switch(e.key) {
case '1':
onclicknum(1)
break
case '2':
onclicknum(2)
break
case '3':
onclicknum(3)
break
case '4':
onclicknum(4)
break
case '5':
onclicknum(5)
break
case '6':
onclicknum(6)
break
case '7':
onclicknum(7)
break
case '8':
onclicknum(8)
break
case '9':
onclicknum(9)
break
case '0':
onclicknum(0)
break
case '.':
onclicknum('.')
break
case '+':
onclicknum('+')
break
case '-':
onclicknum('-')
break
case '*':
onclicknum('×')
break
case '/':
onclicknum('÷')
break
case 'Backspace':
e.preventDefault()
onclickDelete()
break
case 'Enter':
e.preventDefault()
onclickresult()
break
default:
break
}
}
</script>
</head>
<body bgcolor="#F2F2F2">
<h1>简易计算器</h1>
<!--定义按键表格,每个按键对应一个事件触发-->
<table border="1" align="left" bgColor="#2ca1f4" class="Table">
<tr>
<td colspan="4" style="text-align: center;padding: 5px 0;">
<input disabled="" placeholder="0" type="text" id="nummessege" class="Input" />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" id="1" onclick="onclicknum(1)" class="StandardTd">
</td>
<td>
<input type="button" value="2" id="2" onclick="onclicknum(2)" class="StandardTd">
</td>
<td>
<input type="button" value="3" id="3" onclick="onclicknum(3)" class="StandardTd">
</td>
<td>
<input type="button" value="+" id="add" onclick="onclicknum('+')" class="StandardTd">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" id="4" onclick="onclicknum(4)" class="StandardTd">
</td>
<td>
<input type="button" value="5" id="5" onclick="onclicknum(5)" class="StandardTd">
</td>
<td>
<input type="button" value="6" id="6" onclick="onclicknum(6)" class="StandardTd">
</td>
<td>
<input type="button" value="-" id="sub" onclick="onclicknum('-')" class="StandardTd">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" id="7" onclick="onclicknum(7)" class="StandardTd">
</td>
<td>
<input type="button" value="8" id="8" onclick="onclicknum(8)" class="StandardTd">
</td>
<td>
<input type="button" value="9" id="9" onclick="onclicknum(9)" class="StandardTd">
</td>
<td>
<input type="button" value="×" id="mul" onclick="onclicknum('×')" class="StandardTd">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="0" id="0" onclick="onclicknum(0)" class="BigTd">
</td>
<td>
<input type="button" value="." id="point" onclick="onclicknum('.')" class="StandardTd">
</td>
<td>
<input type="button" value="÷" id="division" onclick="onclicknum('÷')" class="StandardTd">
</td>
</tr>
<tr>
<td>
<input type="button" value="Del" id="delete" onclick="onclickDelete()" class="StandardTd" />
</td>
<td>
<input type="button" value="C" id="clear" onclick="onclickclear()" class="StandardTd" />
</td>
<td colspan="2">
<input type="button" value="=" id="result" onclick="onclickresult()" class="BigTd"/>
</td>
</tr>
</table>
</body>
</html>