JS键盘版计算器的制作方法
本文实例为大家分享了js制作计算器的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
#show{
width:232px;
height:80px;
color:white;
border-radius:5px5px00;
background-color:rgba(127,128,127,1);
text-align:right;
border:none;
font-size:45px;
outline:none;
}
table{
border:1pxsolidblack;
border-collapse:collapse;
width:234px;
text-align:center;
font-size:30px;
}
td{
height:55px;
width:57.5px;
background-color:wheat;
}
td:active{
background-color:coral;
}
.aperation{
background-color:rgb(245,146,62);
color:white;
}
#ape{
background-color:wheat;
color:#000000;
}
</style>
</head>
<body>
<divid="">
<inputtype=""id="show"/>
<tableborder="1">
<tr>
<tdid="clear">AC</td>
<td>+/-</td>
<tdclass="aperation"id="ape">%</td>
<tdclass="aperation">/</td>
</tr>
<tr>
<tdclass="num">7</td>
<tdclass="num">8</td>
<tdclass="num">9</td>
<tdclass="aperation">*</td>
</tr>
<tr>
<tdclass="num">4</td>
<tdclass="num">5</td>
<tdclass="num">6</td>
<tdclass="aperation">-</td>
</tr>
<tr>
<tdclass="num">1</td>
<tdclass="num">2</td>
<tdclass="num">3</td>
<tdclass="aperation">+</td>
</tr>
<tr>
<tdcolspan="2"class="num">0</td>
<td>.</td>
<tdclass="aperation"id="result">=</td>
</tr>
</table>
</div>
</body>
<scripttype="text/javascript">
//获取数字的集合
varnums=document.getElementsByClassName("num");
//获取操作符的集合
varoptions=document.getElementsByClassName("aperation");
//获取等号
varresult=document.getElementById("result");
//获取归0
varclear=document.getElementById("clear");
//获取展示框
varshow=document.getElementById("show");
//声明用于保存内容的三个变量
varnumValue="";//存储数字
varoptionC="";//存储操作符
varnumTemp="";//存储暂存值
//点击数字键时触发事件
for(vari=0;i<nums.length;i++){
nums[i].onclick=function(){
if(numValue=="0"){
numValue="";
}
numValue+=this.innerHTML;
show.value=numValue;
}
}
//点击操作键触发事件
for(vari=0;i<options.length-1;i++){
options[i].onclick=function(){
//先存储之前记录的数字
numTemp=numValue;
//记录操作符
optionC=this.innerHTML;
//清除原有记录的数字
numValue="";
}
}
//等号操作
result.onclick=function(){
show.value=eval(numTemp+optionC+numValue);
}
//清零操作
clear.onclick=function(){
show.value="0";
numValue="";
optionC="";
numTemp="";
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。