原生JavaScript制作计算器

2019-11-20 08:44:23

字体：大中小

来源：转载

供稿：网友

原生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>

效果图演示