js实现简单的计算器功能
话不多说，请看示例代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>简单的计算器</title>
<style>
*{
margin:0auto;
padding:0px;
}
html,body{
width:100%;
height:100%;
}
a{
text-decoration:none;
}
.wrap{
width:30%;
min-width:250px;
margin:0auto;
border:1pxsolid#b1b1b1;
}
.wrap.screen{
width:100%;
height:150px;
background-color:#8d8d8d;
}
.wrap.screen.string{
height:100%;
user-select:none;
font-size:30px;
word-break:break-all;
}
.wrap.button-group{
width:100%;
margin-top:5px;
}
.wrap.button-grouptd{
width:25%;
}
.wrap.button-grouptda{
display:inline-block;
height:80px;
text-align:center;
background-color:#d5d5d5;
color:#000;
line-height:80px;
font-size:25px;
width:100%;
user-select:none;
}
.wrap.button-grouptda:hover{
background-color:#9d9d9d;
color:#002a80;
}
.wrap.button-grouptda.active{
background-color:red;
}
</style>
</head>
<body>
<divclass="wrap">
<divclass="screen">
<pclass="string"></p>
</div>
<divclass="button-group">
<tablecellspacing="5"cellpadding="10"border="0"width="100%">
<tr>
<td><ahref="javascript:void(0);">7</a></td>
<td><ahref="javascript:void(0);">8</a></td>
<td><ahref="javascript:void(0);">9</a></td>
<td><ahref="javascript:void(0);">*</a></td>
</tr>
<tr>
<td><ahref="javascript:void(0);">4</a></td>
<td><ahref="javascript:void(0);">5</a></td>
<td><ahref="javascript:void(0);">6</a></td>
<td><ahref="javascript:void(0);">/</a></td>
</tr>
<tr>
<td><ahref="javascript:void(0);">1</a></td>
<td><ahref="javascript:void(0);">2</a></td>
<td><ahref="javascript:void(0);">3</a></td>
<td><ahref="javascript:void(0);">+</a></td>
</tr>
<tr>
<td><ahref="javascript:void(0);">DEL</a></td>
<td><ahref="javascript:void(0);">0</a></td>
<td><ahref="javascript:void(0);"class="active">=</a></td>
<td><ahref="javascript:void(0);">-</a></td>
</tr>
</table>
</div>
</div>
<script>
varnumString=document.getElementsByClassName("string")[0];
varbuttonGroup=document.getElementsByTagName("a");
varscreen=document.getElementsByClassName("string")[0];
varnum1=0;
varnum2=0;
varcount=0;
varf;
varflag=true;
/*控制输入的是数字*/
varflag2=true;
/*控制是否连续点击符号*/
screen.onclick=function(){
numString.innerHTML="";
};
for(vari=0;i<buttonGroup.length;i++){
buttonGroup[i].onclick=function(){
switch(this.innerHTML){
case"0":
case"1":
case"2":
case"3":
case"4":
case"5":
case"6":
case"7":
case"8":
case"9":
if(!flag){
numString.innerHTML="";
flag2=true;
}
flag=true;
numString.innerHTML+=this.innerHTML;
break;
case"DEL":
numString.innerHTML=numString.innerHTML.substr(0,numString.innerHTML.length-1);
break;
case"+":
case"-":
case"*":
case"/":
f=this.innerHTML;
count++;
if(flag2){
flag=false;
/*控制输入的是符号*/
if(count==1){
num1=numString.innerHTML;
}else{
flag2=false;
num2=numString.innerHTML;
numString.innerHTML=eval(num1+f+num2);
num1=numString.innerHTML;
}
}
break;
case"=":
num2=numString.innerHTML;
numString.innerHTML=eval(num1+f+num2);
count=0;
flag=!flag;
break;
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！