JavaScript制作简易计算器（不用eval）
本文实例为大家分享了js制作简易计算器的具体代码，供大家参考，具体内容如下
<head>
<metacharset="UTF-8">
<title>Title</title>
<styletype="text/css">
*{
padding:0;
margin:0;
}
li{
list-style:none;
}
body{
background:#940032;
}
#counter{
width:500px;
height:420px;
background:#939;
margin:50pxauto0;
position:relative;
}
#counterh2{
line-height:42px;
padding-left:15px;
font-size:14px;
font-family:arial;
color:#ff3333;
}
#countera{
font-weight:normal;
text-decoration:none;
color:#ff3333;
}
#countera:hover{
text-decoration:underline;
}
#bg{
width:280px;
height:200px;
border:3pxsolid#680023;
background:#990033;
filter:alpha(opacity=80);
opacity:0.8;
position:absolute;
left:50%;
top:115px;
margin-left:-141px;
}
#counter_content{
width:250px;
position:absolute;
top:130px;
left:130px;
z-index:1;
}
#counter_contenth3{
margin-bottom:10px;
}
#counter_contenth3input{
border:none;
width:223px;
height:30px;
line-height:30px;
padding:010px;
background:url(img/ico.png)no-repeat;
text-align:right;
color:#333;
font-size:14px;
font-weight:bold;
}
#counter_contentdiv{
width:250px;
}
#counter_contentinput{
width:60px;
height:30px;
line-height:30px;
float:left;
background:url(img/ico.png)no-repeat-303px0;
text-align:center;
color:#fff;
cursor:pointer;
margin:01px4px0;
border:0;
}
#counter_contentdiv>input:hover{
background:url(img/ico.png)no-repeat-243px0;
}
#counterp{
width:500px;
position:absolute;
bottom:20px;
left:0;
color:#ff3333;
text-align:center;
font-size:12px;
}
</style>
</head>
<body>
<divid="counter">
<h2>简易计算</h2>
<divid="counter_content">
<h3><inputid="input1"type="text"value="0"/></h3>
<divid="div1">
<inputtype="button"value="7"onclick="kick('7')"/>
<inputtype="button"value="8"onclick="kick('8')"/>
<inputtype="button"value="9"onclick="kick('9')"/>
<inputtype="button"value="+"onclick="kick('+')"/>
<inputtype="button"value="4"onclick="kick('4')"/>
<inputtype="button"value="5"onclick="kick('5')"/>
<inputtype="button"value="6"onclick="kick('6')"/>
<inputtype="button"value="-"onclick="kick('-')"/>
<inputtype="button"value="1"onclick="kick('1')"/>
<inputtype="button"value="2"onclick="kick('2')"/>
<inputtype="button"value="3"onclick="kick('3')"/>
<inputtype="button"value="*"onclick="kick('*')"/>
<inputtype="button"value="0"onclick="kick('0')"/>
<inputtype="button"value="C"onclick="kick('C')"/>
<inputtype="button"value="="onclick="kick('=')"/>
<inputtype="button"value="/"onclick="kick('/')"/>
</div>
</div>
</div>
</body>
<script>
varshowInput=document.getElementById("input1");
varisClear=false;
vartempStr="";
varclacType="";
varisContinue=true;
functionkick(clickValue){
switch(clickValue){
case"=":
if(tempStr!=""&&clacType!=""){
showInput.value=clac(tempStr,showInput.value,clacType);
isContinue=false;
clacType="";
}
break;
case"+":
case"-":
case"*":
case"/":
//如果预存的操作符不为空表示表示连续操作
if(clacType!=""&&!isContinue){//先执行计算
tempStr=clac(tempStr,showInput.value,clacType);
isClear=true;
clacType=clickValue;
}else{
tempStr=showInput.value;//点击操作符之后预存字符
isClear=true;//表示点击了操作符
clacType=clickValue;//预存操作符
}
isContinue=true;
break;
case"C":
showInput.value="0";
isClear=false;
tempStr="";
clacType="";
break;
default://普通的数字按钮点击
showInput.value=showInput.value=="0"?"":showInput.value;
isContinue=false;
if(isClear){
showInput.value="";
showInput.value+=clickValue;
isClear=false;
}else{
showInput.value+=clickValue;
}
break;
}
}
functionclac(num1,num2,type){
switch(type){
case"+":
returnNumber(num1)+Number(num2);
case"-":
returnNumber(num1)-Number(num2);
case"*":
returnNumber(num1)*Number(num2);
case"/":
returnNumber(num1)/Number(num2);
default:
break;
}
}
</script>
关于计算器的精彩文章请查看《计算器专题》，更多精彩等你来发现！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。