<html> <head> <title>计算器</title> <style> .aa{ text-align: center; font-size: 12px; margin-top: 10%; } body,ul{ margin:0px; padding:0px;} body{ background: #AF6332; background-color: #E6E6E6; } li{ list-style:none;} .fl{ float:left;} .fr{ float:right;} .clearfix:after{ content:""; display:block;clear:both} .clearfix{zoom:1;} /*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在，将其并在一行用逗号隔开*/ .calBox{ 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(153,153,153,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0px 0px 10px rgba(153,153,153,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; background: #F9F9F9; overflow: hidden } input{ 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; 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{ 160px;} .one .deng{ background:url(calBg5.jpg); height:100px;} .twoBox{ 353px; overflow:hidden; } .two{ 358px;} .calBox .three { margin:0px} .calu{ padding:0px 10px; 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="aa">记的先点开机</div> <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>