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>
关于计算器的精彩文章请查看《计算器专题》,更多精彩等你来发现!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。