说明：代码取自网络，注释为笔者学习时添加！

<!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>

View Code

 

版权声明：本文为sx00xs原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/sx00xs/p/6440841.html