html5计算器html5Calculator.html

caiselangren

2015-11-10

见附件

源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8/>
    <title>Calculator</title>
    <style id="jsbin-css">
        div, span {
            margin: 0;
            padding: 0;
            font-weight: bold;
            font: bold 16px Arial, sans-serif;
            /*禁止选中文本*/
            -moz-user-select: none;
            -webkit-user-select: none;
            -o-user-select: none;
            user-select: none;
        }

        body {
            background: radial-gradient(circle, #fff, #aaa);
            background: -webkit-radial-gradient(circle, #fff, #aaa);
            background: -o-radial-gradient(circle, #fff, #aaa);
            background: -moz-radial-gradient(circle, #fff, #aaa);
            background-size: cover;
        }

        #calculator {
            width: 325px;
            height: auto;
            margin: 100px auto;
            padding: 20px;
            background: linear-gradient(#9dd2ea, #8bceec);
            background: -o-linear-gradient(#9dd2ea, #8bceec);
            background: -webkit-linear-gradient(#9dd2ea, #8bceec);
            background: -moz-linear-gradient(#9dd2ea, #8bceec);
            border-radius: 5px;
            box-shadow: 0 7px 8px #0000ff
        }

        .keys, .head {
            overflow: hidden;
        }

        .keys span, .clear {
            float: left;
            width: 66px;
            height: 40px;
            margin: 0 5px 10px 8px;
            text-align: center;
            line-height: 40px;
            border-radius: 3px;
            background: #eee;
            box-shadow: 0 5px 1px #999;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .keys span:hover {
            background: #87cefa;
            box-shadow: 0 5px 1px #1e90ff;
            color: #fff;
        }

        .keys .sign {
            background: #fffacd;
        }

        .clear {
            float: left;
            background: #ffb6c1;
            box-shadow: 0 5px 1px #ff86c1;
        }

        .clear:hover {
            background: #ff96a1;
            box-shadow: 0 5px 1px #ff4691;
            color: #fff;
        }

        .show {
            width: 213px;
            height: 40px;
            float: right;
            margin: 0 16px 5px 0;
            border-radius: 3px;
            background: #999;
            font-size: 20px;
            line-height: 40px;
            text-align: right;
            padding-right: 10px;
            box-shadow: inset 0 4px 5px #333;
        }
    </style>
</head>
<body>
<div id="calculator">
    <div class="head">
        <span class="clear">c</span>
        <div class="show"></div>
    </div>
    <div class="keys">
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span class="sign">+</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span class="sign">-</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span class="sign">*</span>
        <span>0</span>
        <span>.</span>
        <span>=</span>
        <span class="sign">/</span>
    </div>
</div>
<script>
    window.onload = function () {
        var oShow = getByClass("calculator", "show")[0];
        var aNum = document.getElementById("calculator").getElementsByTagName("span");
        for (var i = 0, iLen = aNum.length; i < iLen; i++) {
            aNum[i].onclick = function () {
                var oShowVal = oShow.innerHTML;
                var oNumVal = this.innerHTML;
                var num1, num2 = null;
                num1 = oShowVal;
                //判断按键
                if (oNumVal == "c") {
                    oShow.innerHTML = "";
                }
                else if (oNumVal == "=") {
                    var oResult = eval(oShowVal);
                    console.log(oResult);
                    oShow.innerHTML = oResult==undefined?'0':oResult;
                }
                else {
                    oShow.innerHTML += oNumVal;
                }
            }
        }
    };
    function getByClass(root, sClass) {
        var obj = document.getElementById(root);
        var arr = [];
        var aItems = obj.getElementsByTagName("*");
        for (var i = 0; i < aItems.length; i++) {
            if (aItems[i].className == sClass) {
                arr.push(aItems[i]);
            }
        }
        return arr;
    }
</script>
</body>
</html>

background html5