[读码时间] 网页计算器
说明：代码取自网络，注释为笔者学习时添加！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body,div,p,ul,li,input{ margin:0; padding:0; } ul{ list-style-type:none;/*去除列表样式*/ } a{ color:#fff;/*白色*/ outline:none;/*轮廓*/ text-decoration:none; } body{ font:700 24px/1.5 arial;/*行高36px*/ } #calc{ position:relative;/*相对*/ width:300px; background:#000;/*黑色*/ margin:10px auto;/*左右置中*/ } #calc p{ color:#fff;/*白色*/ text-align:right; font:12px/20px Arial; padding:0 5px; } #calc .f-text{ border:0; width:290px; height:84px; text-align:right; font:700 50px/84px Arial;/*粗细，字号，行高，字体*/ background:url(img/inputBg.jpg) repeat-x;/*横向重复*/ padding:0 5px; } #calc ul{ position:relative;/*相对定位*/ overflow:hidden; zoom:1; background:url(img/bg.jpg); padding:0 0 17px 8px; } #calc ul li{ float:left;/*左浮动*/ width:63px; height:41px; margin:17px 10px 0 0; } #calc ul li a{ display:block;/*块显示*/ width:63px; height:41px; line-height:41px;/*行高*/ text-align:center;/*文本居中*/ background:url(img/bgn.png) no-repeat;/*不重复*/ } #calc ul li a:hover{ background-position:-63px 0; } #calc ul li.btn-1 a{ background-position:0 -41px; } #calc ul li.btn-1 a:hover{ background-position:-63px -41px; } #calc ul li.btn-2{ position:absolute;/*绝对定位*/ top:174px; right:0; height:99px; } #calc ul li.btn-2 a{ height:99px; line-height:99px; background-position:0 -164px; } #calc ul li.btn-2 a:hover{ background-position:-63px -164px; } #calc ul li.btn-3{ width:136px; } #calc ul li.btn-3 a{ width:136px; background-position:0 -82px; } #calc ul li.btn-3 a:hover{ background-position:0 -123px; } #formula{ position:absolute; top:20px; background:none;/*背景无*/ border:0;/*边框无*/ font:700 12px/1.5 Arial;/*字体粗细 */ width:280px; padding:3px 15px 0 5px; text-align:right; } </style> <script> window.onload = function () { var oCalc = document.getElementById("calc");//获取对div的引用 var aA = oCalc.getElementsByTagName("a");//获取div中所有a元素 var aInput = oCalc.getElementsByTagName("input")[0];//获取div中的input元素中的第一个 var oFormula = document.getElementById("formula");//获取input输入框，显示结果 var s = false;//flag标记，布尔值 var i = 0; for (i = 0; i < aA.length; i++) { aA[i].onfocus = function () { //注册focus焦点事件 this.blur(); }; aA[i].onclick = function () { switch (this.innerHTML) { case "c": aInput.value = 0; oFormula.value = ""; break; case "%": count("%"); break; case "÷": count("/"); break; case "x": count("*"); break; case "-": count("-"); break; case "+": count("+"); break; case "=": s || (oFormula.value += aInput.value); aInput.value = eval(oFormula.value.replace(/\%\/\*\-\+/, ''));//调用replace去除加减乘除符号 aInput.value = aInput.value.substr(0, 10).replace("NaN", 0);//substr接收2个参数，第2个参数是指返回的字符个数 s = true; break; case ".": if (aInput.value.search(/[\.\%\/\*\-\+]/) != -1)//search返回匹配的第一个索引，如果没找到，则返回-1，类似indexOf break; default: s && (aInput.value = 0, oFormula.value = "", s = false); aInput.value.length < 10 && (aInput.value = (aInput.value + this.innerHTML).replace(/^[0\%\/\*\-\+](\d)/, "$1")); } } } function count(a) { if (s) { oFormula.value = aInput.value + a; aInput.value = a; s = false; } else { /[\%\/\*\-\+]$/.test(aInput.value || (oFormula.value += aInput.value)); aInput.value = a; /[\%\/\*\-\+]$/.test(oFormula.value) || (oFormula.value += aInput.value); oFormula.value = oFormula.value.slice(-1) != a ? oFormula.value.replace(/.$/, a) : oFormula.value; } } } </script> </head> <body> <!--div包裹p、input、ul列表、input--> <div id="calc"> <p>By - Ferris QQ:</p> <input class="f-text" type="text" readonly maxlength="9" value="0" /><!--最大长度为9，默认值为0，只读--> <ul> <!--第一行：c % ÷ X--> <li class="btn-1"><a href="javascript:void(0)">c</a></li> <li class="btn-1"><a href="javascript:void(0)">%</a></li> <li class="btn-1"><a href="javascritp:void(0)">÷</a></li> <li class="btn-1"><a href="javascript:void(0)">x</a></li> <!--第二行：7 8 9 - --> <li><a href="javascript:void(0)">7</a></li> <li><a href="javascript:void(0)">8</a></li> <li><a href="javascript:void(0)">9</a></li> <li class="btn-1"><a href="javascript:void(0)">-</a></li> <!--第三行：4 5 6 + --> <li><a href="javascript:void(0)">4</a></li> <li><a href="javascript:void(0)">5</a></li> <li><a href="javascript:void(0)">6</a></li> <li class="btn-1"><a href="javascript:void(0)">+</a></li> <!--第四行：1 2 3 = --> <li><a href="javascript:void(0)">1</a></li> <li><a href="javascript:void(0)">2</a></li> <li><a href="javascript:void(0)">3</a></li> <li class="btn-2"><a href="javascript:void(0)">=</a></li> <!--第五行：0 . --> <li class="btn-3"><a href="javascript:void(0)">0</a></li> <li><a href="javascript:void(0)">.</a></li> </ul> <!--公式，用于显示结果--> <input id="formula" type="text" readonly value="" /> </div> </body> </html>
