<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var display;
var result="";
var calresults;
display=document.getElementById("xianshi");
function calculator(){
result+=event.srcElement.innerText;
// alert(result);
xianshi.innerText=result;
}
function resultscalcaulte(){
var display=document.getElementById("xianshi");
calresults=eval(result);
//eval()函数可以计算某个字符串，并执行其中的js代码
//语法eval（string）
//返回值通过计算string得到的值
//该方法只接受原始字符串作为参数，如果string参数不是原始字符串，
//那么该方法将不作任何改变的返回，不要为eval（）函数传递String对象来作为参数
display.innerText=calresults;
}
function empty(){
result="";
xianshi.innerText=result;
}
function back(){
if (result!="") {
result=result.substring(0, result.length - 1);
xianshi.innerText=result;
}
}
</script>
<style>
.display{
font-size: 40px;
text-align: right;
padding-top: 20px;
}
#outer{
background-color: beige;
height: 500px;
width: 400px;
margin: 0 auto;
padding-top: 20px;
}
#screen{
background-color: gray;
height: 100px;
width: 340px;
margin: 0 auto;
}
#calcula{
background-color: gray;
height: 350px;
width: 340px;
margin: 0 auto;
margin-top: 20px;
padding-top: 25px;
}
table{
margin: 0px 20px 20px 20px;
}
td{
color: cadetblue;
background-color: beige;
height: 60px;
width: 75px;
text-align: center;
}
td:active{
background-color: grey;
}
</style>
</head>
<body>
<div id="outer">
<div id="screen">
<div id="xianshi" class="display"></div>
</div>
<div id="calcula">
<table>
<tr>
<td onclick="calculator()">+</td>
<td onclick="calculator()">-</td>
<td onclick="calculator()">*</td>
<td onclick="calculator()">/</td>
</tr>
<tr>
<td onclick="calculator()">7</td>
<td onclick="calculator()">8</td>
<td onclick="calculator()">9</td>
<td rowspan="3" onclick="resultscalcaulte()">=</td>
</tr>
<tr>
<td onclick="calculator()">4</td>
<td onclick="calculator()">5</td>
<td onclick="calculator()">6</td>
</tr>
<tr>
<td onclick="calculator()">1</td>
<td onclick="calculator()">2</td>
<td onclick="calculator()">3</td>
</tr>
<tr>
<td onclick="empty()">C</td>
<td onclick="calculator()">0</td>
<td onclick="calculator()">.</td>
<td onclick="back()">D</td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果图：