原生JavaScript制作计算器

原生JavaScript制作计算器

<！DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <！--第一个数X--> X:<input type="text" id="inp1" value="" /><br /> <！--符号--> F:<input type="text" id="inp2" value="" /><br /> <！--第二个数Y--> Y:<input type="text" id="inp3" value="" /><br /> <！--结果R--> R:<input type="text" id="inp4" value="" /><br /> <！--点击按钮--> <input type="submit" name="btn" id="btn" value="请计算" /> </body> <script type="text/javascript"> var inpX1 = document.getElementById（"inp1"）; var inpF1 = document.getElementById（"inp2"）; var inpY1 = document.getElementById（"inp3"）; var inpR = document.getElementById（"inp4"）; var result = document.getElementById（"btn"）; var inpX ; var inpY ; var inpF ; var sum;// 点击事件 result.onclick = function（）{inpX = Number（inpX1.value）;inpF = inpF1.value;inpY = Number（inpY1.value）;switch （inpF）{case "+":{ sum = inpX + inpY; break;}case "-":{ sum = inpX - inpY; break;}case "*":{ sum =inpX * inpY; break;}case "/":{ sum = inpX / inpY; break;}default:{ alert（"请输入加减乘除中的任意一个"）; break;}}inpR.value = sum.toFixed（2）; } </script></html>

再给大家分享一个稍微复杂些的计算器

<！doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>body,ul{ margin:0px; padding:0px;}body{ background:#AF6332}li{ list-style:none;}.fl{ float:left;}.fr{ float:right;}.clearfix:after{ content:""; display:block;clear:both}.clearfix{zoom:1;}/*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在，将其并在一行用逗号隔开*/.calBox{ width:460px; padding-bottom:10px;background:#FDFDFD; border-radius:5px; position:absolute; left:50%; top:50%; margin-left:-230px; margin-top:-225px; box-shadow:0px 0px 10px rgba（0,0,0,0.8）,0px 0px 10px rgba（0,0,0,0.5） inset; -webkit-box-shadow:0px 0px 10px rgba（0,0,0,0.8）,0px 0px 10px rgba（0,0,0,0.5） inset; background:#F9F9F9; overflow:hidden}input{ width:406px; height:82px; margin:10px 7px 0px; border-radius:5px; border:1px solid #64655F; box-shadow:0px 5px 2px rgba（157,157,145,0.8） inset; -webkit-box-shadow:0px 5px 2px rgba（157,157,145,0.8） inset; outline:none; background:#FCFDEB; text-align:right; font-family:"微软雅黑"; font-size:40px; padding:0px 10px;}ul{}li{ list-style:none; width:74px; height:34px; line-height:34px; text-align:center; font-family:"微软雅黑"; border:1px solid #8B8B8B; border-radius:5px; background:url（img/calBg） repeat-x; float:left; margin:12px 6px 0px;}.one li{ height:44px; background:url（calBg1.jpg） repeat-x; line-height:44px;cursor:pointer;}.one .orange{ background:url（calBg2.jpg） repeat-x; border:1px solid #875733;}.one .black{ background:url（calBg3.jpg） repeat-x; border:1px solid #363636; color:#fff;}.one .gray{ background:url（calBg4.jpg） repeat-x; border:1px solid #5F6366;}.zero{ width:160px;}.one .deng{ background:url（calBg5.jpg）; height:100px;}.twoBox{ width:353px; overflow:hidden; }.two{ width:358px;}.calBox .three { margin:0px}.calu{ padding:0px 10px; width:470px;}</style><script>function findArr（a,c）{for（var b=0;b<a.length;b++）{if（a[b]==c）{return true}}return false}function getClass（d,f）{if（document.getElementsByClassName）{return d.getElementsByClassName（f）}else{var a=[];var e=document.getElementsByTagName（"*"）;for（var c=0;c<e.length;c++）{var b=e[c].className.split（" "）;if（findArr（b,f））{a.push（e[c]）}}return a}};window.onload=function（）{var aNum=getClass（document,"num"）;var oText=document.getElementById（"text"）;var aPer=getClass（document,"oper"）;var oPer=document.getElementById（"per"）;var oText1=document.getElementById（"text1"）;var oDeng=getClass（document,"deng"）[0];var oSq=getClass（document,"sq"）[0];var oRec=getClass（document,"rec"）[0];var oZheng=getClass（document,"zheng"）[0];var oOn=getClass（document,"on"）[0];var oOff=getClass（document,"off"）[0];var oClea=getClass（document,"clea"）[0];var bOnOrOffClick=false;function fnNum（a）{var bClear=false;oText.value="0"for（var i=0;i<aNum.length;i++）{aNum[i].onclick=function（）{if（！bOnOrOffClick）return;if（bClear）{bClear=false;}if（oText.value.indexOf（"."）！=-1）{if（this.innerHTML=="."）{return;}}if（oPer.value&&oText.value&&oText1.value==""）{oText1.value=oText.value;oText.value="";}var re=/^0.{1}d+$/;var re1=/^（[0]d+）$/;oText.value+=this.innerHTML;if（re.test（oText.value））{return;}if（re1.test（oText.value））{oText.value=this.innerHTML;}}//符号部分的添加for（var j=0;j<aPer.length;j++）{aPer[j].onclick=function（）{if（oText.value&&oPer.value&&oText1.value）{var n=eval（oText1.value+oPer.value+oText.value）;oText.value=n;oText1.value="";}oPer.value=this.innerHTML;}}//点击等号的时候oDeng.onclick=function（）{//+-*/%的情况if（oText1.value==""&&oPer.value==""&&oText.value==""）{return;}var n=eval（oText1.value+oPer.value+oText.value）;oText.value=n;oText1.value="";oPer.value="";bClear=true;}//点击开根号的时候oSq.onclick=function（）{var m=Math.sqrt（oText.value）;oText.value=m;}//点击倒数的时候oRec.onclick=function（）{var a=1/oText.value;if（oText.value=="0"）{a="正无穷"}oText.value=a;}//正负号的时候oZheng.onclick=function（）{if（oText.value>0）{oText.value=-oText.value;}else{oText.value=-oText.value;}}//清屏的时候oClea.onclick=function（）{oText.value="0";oText1.value="";oPer.value="";}}}//on时oOn.onclick=function（）{bOnOrOffClick=true;fnNum（bOnOrOffClick）;}//off时oOff.onclick=function（）{bOnOrOffClick=false;fnNum（bOnOrOffClick）;oText.value="";}}</script></head><body><div class="calBox"><div class="calu"><input type="text" id="text"><ul class="one clearfix"><li class="orange on">开机</li><li class="orange off">关机</li><li class="orange clea">清屏</li><li class="black zheng">+/-</li><li class="black rec">1/x</li><li class="num">7</li><li class="num">8</li><li class="num">9</li><li class="gray oper">/</li><li class="black oper">%</li><li class="num">4</li><li class="num">5</li><li class="num">6</li><li class="gray oper">*</li><li class="black sq">√</li><！-- --></ul><div class="clearfix"><div class="twoBox fl"><ul class="one fl two"><li class="num">1</li><li class="num">2</li><li class="num">3</li><li class="gray oper">-</li><li class="zero num">0</li><li class="num">.</li><li class="gray oper">+</li></ul></div><ul class="one three clearfix fl"><li class="black deng fl">=</li></ul></div></div></div><input type="text" id="per" style="display:none"><input type="text" id="text1" style="display:none"></body></html>

效果图演示