插件描述：一个简洁的网页JS计算器，附详细代码释义。通过下边的效果演示就可以看到，这是一个挺小的js网页计算器
一个简洁的网页JS计算器，附详细代码释义。通过下边的效果演示就可以看到，这是一个挺小的js网页计算器，界面美化的我想还是不错的，毕竟在没有使用任何图片修饰的情况下，很好看，而且功能挺实用，可以完成基本的数学算数运算。
实现代码
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | <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+)$/;
|