原生JavaScript制作计算器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--第一个数X--> X:<input type="text" value="" /><br /> <!--符号--> F:<input type="text" value="" /><br /> <!--第二个数Y--> Y:<input type="text" value="" /><br /> <!--结果R--> R:<input type="text" value="" /><br /> <!--点击按钮--> <input type="submit" 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 "https://www.jb51.net/":{ 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=https://www.jb51.net/^0\.{1}\d+$/; var re1=https://www.jb51.net/^([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> <div> <input type="text"> <ul> <li>开机</li> <li>关机</li> <li>清屏</li> <li>+/-</li> <li>1/x</li> <li>7</li> <li>8</li> <li>9</li> <li>/</li> <li>%</li> <li>4</li> <li>5</li> <li>6</li> <li>*</li> <li>√</li> <!-- --> </ul> <div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>-</li> <li>0</li> <li>.</li> <li>+</li> </ul> </div> <ul> <li>=</li> </ul> </div> </div> </div> <input type="text"> <input type="text"> </body> </html>
效果图演示
您可能感兴趣的文章: