js实现计算器

Posted 你像一只失宠猫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现计算器相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>计算器</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />
    <style type="text/css">
    .btn {
        width: 70px;
        height: 30px;
        margin: 1px;
        border: 1px solid #2F3642;
        border-radius: 2px;
        color: #FFFFFF;
        outline: 0;
    }

    .num {
        background-color: #3262A6;
    }

    .equal {
        background-color: #D87B00;
    }

    .math {
        background-color: #80573E;
    }

    .control {
        background-color: #47515F;
    }

    .text {
        width: 297px;
        height: 30px;
        margin-bottom: 5px;
        font-size: 26px;
        font-family: Tahoma, Geneva, sans-serif;
        color: #fff;
        background-color: #000;
        text-align: right;
        outline: 0;
    }
    </style>
</head>

<body>
    <input class="text" name="textfield" readonly type="text" id="txt" size="30" />
    <br />
    <button class="btn control" type="button" id="setMemory" name="control">存储</button>
    <button class="btn control" type="button" id="getMemory" name="control">取存</button>
    <button class="btn control" type="button" id="backspace" name="control">退格</button>
    <button class="btn control" type="button" id="clear" name="control">清屏</button>
    <br />
    <input class="btn num" type="button" name="button" id="" value="7" />
    <input class="btn num" type="button" name="button" id="" value="8" />
    <input class="btn num" type="button" name="button" id="" value="9" />
    <button class="btn math" type="button" name="math" value="/">÷</button>
    <br />
    <input class="btn num" type="button" name="button" id="" value="4" />
    <input class="btn num" type="button" name="button" id="" value="5" />
    <input class="btn num" type="button" name="button" id="" value="6" />
    <button class="btn math" type="button" name="math" value="*">×</button>
    <br />
    <input class="btn num" type="button" name="button" id="" value="1" />
    <input class="btn num" type="button" name="button" id="" value="2" />
    <input class="btn num" type="button" name="button" id="" value="3" />
    <button class="btn math" type="button" name="math" value="+">＋</button>
    <br />
    <input class="btn num" type="button" name="button" id="" value="0" />
    <input class="btn num" type="button" name="button" id="" value="." />
    <button class="btn equal" type="button" id="equal" name="math" value="=">＝</button>
    <button class="btn math" type="button" name="math" value="-">－</button>
    <script language="javascript" type="text/javascript">
    window.onload = function() {
        //显示框
        var oTxt = document.getElementById("txt");
        //数字键
        var oBtn = document.querySelectorAll(".num");
        //运算键
        var oMath = document.querySelectorAll(".math");
        //等号键
        var oEqual = document.getElementById("equal");
        //退格键
        var oBackspace = document.getElementById("backspace");
        //清屏键
        var oClear = document.getElementById("clear");
        //存储键
        var oSet = document.getElementById("setMemory");
        //取存键
        var oGet = document.getElementById("getMemory");
        //运算过程中储存对象
        var obj = {
            num1: 0,
            sign: ‘‘,
            num2: 0,
            result: 0,
            isDone: false
        }
        for (var i = 0; i < oBtn.length; i++) {
            oBtn[i].onclick = function() {
                // 根据obj.isDone判断是否进行下一步运算
                if (obj.isDone) {
                    oTxt.value = ‘‘;
                    obj.isDone = false;
                }
                //如果开始小数点，则自动填充0
                if (this.value == "." && oTxt.value == "") {
                    oTxt.value = "0.";
                    return false;
                }
                //如果已经有小数点，则不再添加小数点
                if (this.value == "." && oTxt.value.indexOf(".") != -1) {
                    return false;
                }
                //如果第一个数字为0
                if (oTxt.value == "0" && this.value != ".") {
                    oTxt.value = this.value;
                    return false;
                }
                // 默认
                oTxt.value += this.value;
            }
        }
        //退格
        oBackspace.onclick = function() {
            oTxt.value = oTxt.value.substr(0, oTxt.value.length - 1);
        }
        //清屏
        oClear.onclick = function() {
            oTxt.value = "";
            // 重置
            resetObj();
            obj.isDone = false;
        }
        //运算过程，暂时只能运算一个运算符
        for (var i = 0; i < oMath.length; i++) {
            oMath[i].onclick = function() {
                obj.isDone = false;
                obj.num1 = oTxt.value;
                obj.sign = this.innerText;
                oTxt.value += this.innerText;
            }
        }
        //等号计算
        oEqual.onclick = function() {
            //计算运算符的位置，切割出第二个数字
            var index = oTxt.value.indexOf(obj.sign);
            // 如果没有运算符，return,不作处理
            if (!index) {
                return false;
            }
            obj.num2 = oTxt.value.slice(index + 1);
            // 如果运算符之后第二个数字没有，不做运算
            if (!obj.num2) {
                obj.num2 = 0;
                return false;
            }

            switch (obj.sign) {
                case "÷":
                    obj.result = obj.num1 / obj.num2;
                    break;
                case "×":
                    obj.result = obj.num1 * obj.num2;
                    break;
                case "＋":
                    obj.result = parseFloat(obj.num1) + parseFloat(obj.num2);
                    break;
                case "－":
                    obj.result = obj.num1 - obj.num2;
                    break;
                default:
                    break;
            }
            oTxt.value = obj.result;
            obj.isDone = true;
            // 重置
            resetObj();
        }
        // 储存数字至localStorage,只存第一个数字或者计算之后的结果
        oSet.onclick = function() {
            if (!obj.sign) {
                localStorage.memory = oTxt.value;
            }
        }
        /*
        取出localStorage里面的数字，
        如果是第一个数字/计算结果直接替换，
        如果是第二个数字+=至运算符后面
        */
        oGet.onclick = function() {
            if (obj.sign) {
                // 如果是第二个数字，替换掉原先的数字，+=至运算符后面
                var index = oTxt.value.indexOf(obj.sign);
                oTxt.value = oTxt.value.substr(0, index + 1);
                oTxt.value += localStorage.memory;
            } else {
                oTxt.value = localStorage.memory;
            }
        }
        /*
        重置运算过程中储存对象
        */
        function resetObj() {
            obj.num1 = obj.num2 = obj.result = 0;
            obj.sign = ‘‘;
        }

    }
    </script>
</body>

</html>

 

以上是关于js实现计算器的主要内容，如果未能解决你的问题，请参考以下文章

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

golang代码片段（摘抄）

安全测试 web安全测试 常规安全漏洞 可能存在SQL和JS注入漏洞场景分析。为什么自己没有找到漏洞，哪么可能存在漏洞场景是？SQL注入漏洞修复 JS注入漏洞修复 漏洞存在场景分析和修复示例(代码片段