码迷,mamicode.com
首页 > Web开发 > 详细

js实现计算器

时间:2018-09-20 11:05:00      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:break   ffffff   document   eva   第一个   clear   ==   back   port   

<!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实现计算器

标签:break   ffffff   document   eva   第一个   clear   ==   back   port   

原文地址:https://www.cnblogs.com/150536FBB/p/9678794.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!