Javascript 设计计算器

最新推荐文章于 2022-07-18 20:26:24 发布
MrLc666
最新推荐文章于 2022-07-18 20:26:24 发布
阅读量10w+
点赞数 1
分类专栏： JavaScript 文章标签： JavaScript
本文章博主原创，希望对你有所帮助。
本文链接：https://blog.csdn.net/sakenc/article/details/91543929
版权
JavaScript 专栏收录该内容
12 篇文章 0 订阅
订阅专栏
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #calculate {
            line-height: 60px;
            text-align: center;
            background: #ccc;
            font-size: 16px;
            font-weight: bold;
        }

            #calculate tbody input {
                width: 100%;
                height: 60px;
                background: #033;
                color: #fff;
                font: bold 16px/1em 'Microsoft yahei';
            }

            #calculate tbody td {
                width: 25%;
                background: #fff;
            }

        #calculate_outPut {
            font-size: 20px;
            letter-spacing: 2px;
            background: #fff;
            height: 40px;
            border: none;
            text-align: right;
            width: 100%;
        }
    </style>
</head>

<body>
    <table width="300" border="0" cellspacing="1" cellpadding="0" id="calculate">
        <thead>
            <tr>
                <td colspan="4" align="right"><input id="calculate_outPut" value="0" disabled="disabled"></td>
            </tr>
        </thead>
        <tbody id="calculate_num">
            <tr>
                <td>
                    <label>
                        <input type="button" name="button" id="button" value="7" _type='num' />
                    </label>
                </td>
                <td><input type="button" value="8" _type='num' /></td>
                <td><input type="button" value="9" _type='num' /></td>
                <td><input type="button" value="/" _type='op' /></td>
            </tr>
            <tr>
                <td><input type="button" value="4" _type='num' /></td>
                <td><input type="button" value="5" _type='num' /></td>
                <td><input type="button" value="6" _type='num' /></td>
                <td><input type="button" value="*" _type='op' /></td>
            </tr>
            <tr>
                <td><input type="button" value="1" _type='num' /></td>
                <td><input type="button" value="2" _type='num' /></td>
                <td><input type="button" value="3" _type='num' /></td>
                <td><input type="button" value="-" _type='op' /></td>
            </tr>
            <tr>
                <td><input type="button" value="0" _type='num' /></td>
                <td><input type="button" value="+/-" _type='+/-' /></td>
                <td><input type="button" value="." _type='.' /></td>
                <td><input type="button" value="+" _type='op' /></td>
            </tr>
            <tr>
                <td colspan="2" id="debug"><input type="button" value="backspace" _type='bs' /></td>
                <td><input type="button" value="C" _type='cls' /></td>
                <td><input type="button" value="=" _type='eval' /></td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        //计算对象
        var operateExp = {
            '+': function (num1, num2) {
                return num1 + num2;
            },
            '-': function (num1, num2) {
                return num1 - num2;
            },
            '*': function (num1, num2) {
                return num1 * num2;
            },
            '/': function (num1, num2) {
                return num2 === 0 ? 0 : num1 / num2;
            }
        }
        //计算函数
        var operateNum = function (num1, num2, op) {
            if (!(num1 && num2))
                return;
            //保证num1,num2都为数字
            num1 = Number(num1);
            num2 = Number(num2);
            //不存在操作符,返回num1;
            if (!op)
                return num1;
            //匹配运算公式
            if (!operateExp[op])
                return 0;
            return operateExp[op](num1, num2);
        }
        //显示面板
        var calculate_outPut = document.getElementById("calculate_outPut");
        //操作面板
        var calculate_num = document.getElementById("calculate_num");
        var result = 0;
        //计算结果
        var isReset = false;
        //是否重新设置
        var operation;
        //操作符
        //设置显示屏的值
        function setScreen(num) {
            calculate_outPut.value = num;
        }
        //获取显示屏的值
        function getScreen() {
            return calculate_outPut.value;
        }
        //添加点击事件
        calculate_num.onclick = function (e) {
            var ev = e || window.event;
            var target = ev.target || ev.srcElement;
            if (target.type == "button") {
                var mark = target.getAttribute("_type");
                //获取当前点击button的自定义的属性。
                var value = target.value;
                //获取当前的值
                var num = getScreen();
                //获取当前框的值
                if (mark === 'bs') {//退格键
                    if (num == 0)
                        return;
                    var snum = Math.abs(num).toString();
                    if (snum.length < 2)
                        setScreen(0);
                    else
                        setScreen(num.toString().slice(0, -1));
                }
                if (mark === 'num') {//数字键
                    if (num === '0' || isReset) {//有操作符或显示屏为0
                        setScreen(value);
                        isReset = false;
                        return;
                    }
                    setScreen(num.toString().concat(value));
                }
                if (mark === ".") {//小数点
                    var hasPoint = num.toString().indexOf(".") > -1;
                    if (hasPoint) {
                        if (isReset) {
                            setScreen("0" + value);
                            isReset = false;
                            return;
                        }
                        return;
                    }
                    setScreen(num.toString().concat(value));
                }
                if (mark === "+/-") {//正负号
                    setScreen(-num);
                }
                if (mark === "op") {//如果点击的是操作符则设计第一个操作数
                    if (isReset)
                        return;
                    isReset = true;
                    if (!operation) {
                        result = +num;
                        operation = value;
                        return;
                    }
                    result = operateNum(result, num, operation);
                    setScreen(result);
                    operation = value;
                }
                if (mark === "cls") {//清零
                    result = 0;
                    setScreen(result);
                    isReset = false;
                }
                if (mark === "eval") {//计算
                    if (!operation)
                        return;
                    result = operateNum(result, num, operation);
                    setScreen(result);
                    operation = null;
                    isReset = false;
                }
            }
        }
    </script>
</body>
</html>