按下就变真
按数字键就变假
计算结果时候
先判断那个变量
假的话就正常计算
真的话就把之前的结果和之前的运算符号同之前第二个运算数
计算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Calaulate~</title>
<style>
* {
padding: 0
margin: 1px
}
#calculate {
margin: auto
margin-top: 10px
border: solid 6px dimgrey
border-spacing: 0px
}
#display {
width: 100%
height: 30px
border-bottom: solid 4px darkgray
font-weight: bold
color: #gray
font-family: 黑体
padding-left: 2px
}
#equal {
cursor: pointer
width: 40px
height: 100%
background: dimgrey
border: solid 1px #FFFFFF
color: #ffffff
text-align: center
font-weight: bold
font-family: 黑体
}
.numberkey {
cursor: pointer
width: 40px
height: 30px
border: solid 1px #FFFFFF
background: gray
color: #ffffff
text-align: center
font-weight: bold
font-family: 黑体
}
.numberkey:hover{
background: #696969
}
#equal:hover{
background: lightgrey
}
</style>
</head>
<body>
<table id="calculate" onclick="calculater()">
<tr>
<td id="display" colspan="5">0</td>
</tr>
<tr>
<td class="numberkey">1</td>
<td class="numberkey">2</td>
<td class="numberkey">3</td>
<td class="numberkey">+</td>
<td class="numberkey" onclick="del()">C</td>
</tr>
<tr>
<td class="numberkey">4</td>
<td class="numberkey">5</td>
<td class="numberkey">6</td>
<td class="numberkey">-</td>
<td rowspan="3" id="equal" onclick="resCal()">=</td>
</tr>
<tr>
<td class="numberkey">7</td>
<td class="numberkey">8</td>
<td class="numberkey">9</td>
<td class="numberkey">*</td>
</tr>
<tr>
<td class="numberkey">+/-</td>
<td class="numberkey">0</td>
<td class="numberkey">.</td>
<td class="numberkey">/</td>
</tr>
</table>
</body>
<script>
var results = ""
var calres = ""
function calculater(){
if(event.srcElement.innerText=="="){
return
}
if(event.srcElement.innerText=="C"){
del()
display.innerText="0"
return
}
results += event.srcElement.innerText
display.innerText = results
}
function resCal(){
calres=eval(results)
display.innerText = calres
results = calres
}
function del(){
results = ""
display.innerText = ""
}
</script>
</html>
比较简易，你可以自己修改一下，加减乘除都可以！
