一个简洁的网页JS计算器,附详细代码释义。通过下边的效果演示就可以看到,这是一个挺小的js网页计算器,界面美化的我想还是不错的,毕竟在没有使用任何图片修饰的情况下,很好看,而且功能挺实用,可以完成基本的数学算数运算。
html
<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">
css
<style> 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{ 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(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{ 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>
js
<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>