用js写一个计算器,具备输入限制(不能连续输入运算符等),连等的功能...
发布网友
发布时间：2022-05-05 08:45
共1个回答
热心网友
时间：2022-04-25 16:07
<!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>
比较简易，你可以自己修改一下，加减乘除都可以！
追问谢谢你的回答!但是我主要想问的是怎么实现连等的功能以及*输入 连等:比如输入1+2,按下=得到结果为3,然后再次点击=,得到结果为5,依次为7,9,11......*输入:比如只能输入一个1+2,而不能输入1+++++2,或者1+-2等等不符合逻辑的输入;以及只能输入1.2,0.2,而不能输入1.....2,0........3这类似的情况
请问有什么高见吗?
