JavaScript 不用eval制作简易计算器

最新推荐文章于 2023-03-30 14:52:37 发布

万花果子

最新推荐文章于 2023-03-30 14:52:37 发布

阅读量1.9k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 计算器

本文链接：https://blog.csdn.net/sinat_27790827/article/details/51308048

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        body {
            background: #940032;
        }

        #counter {
            width: 500px;
            height: 420px;
            background: #939;
            margin: 50px auto 0;
            position: relative;
        }

        #counter h2 {
            line-height: 42px;
            padding-left: 15px;
            font-size: 14px;
            font-family: arial;
            color: #ff3333;
        }

        #counter a {
            font-weight: normal;
            text-decoration: none;
            color: #ff3333;
        }

        #counter a:hover {
            text-decoration: underline;
        }

        #bg {
            width: 280px;
            height: 200px;
            border: 3px solid #680023;
            background: #990033;
            filter: alpha(opacity=80);
            opacity: 0.8;
            position: absolute;
            left: 50%;
            top: 115px;
            margin-left: -141px;
        }

        #counter_content {
            width: 250px;
            position: absolute;
            top: 130px;
            left: 130px;
            z-index: 1;
        }

        #counter_content h3 {
            margin-bottom: 10px;
        }

        #counter_content h3 input {
            border: none;
            width: 223px;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            background: url(img/ico.png) no-repeat;
            text-align: right;
            color: #333;
            font-size: 14px;
            font-weight: bold;
        }

        #counter_content div {
            width: 250px;
        }

        #counter_content input {
            width: 60px;
            height: 30px;
            line-height: 30px;
            float: left;
            background: url(img/ico.png) no-repeat -303px 0;
            text-align: center;
            color: #fff;
            cursor: pointer;
            margin: 0 1px 4px 0;
            border: 0;
        }

        #counter_content div > input:hover {
            background: url(img/ico.png) no-repeat -243px 0;
        }

        #counter p {
            width: 500px;
            position: absolute;
            bottom: 20px;
            left: 0;
            color: #ff3333;
            text-align: center;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="counter">
    <h2>简易计算</h2>
    <div id="counter_content">
        <h3><input id="input1" type="text" value="0"/></h3>
        <div id="div1">
            <input type="button" value="7" onclick="kick('7')"/>
            <input type="button" value="8" onclick="kick('8')"/>
            <input type="button" value="9" onclick="kick('9')"/>
            <input type="button" value="+" onclick="kick('+')"/>
            <input type="button" value="4" onclick="kick('4')"/>
            <input type="button" value="5" onclick="kick('5')"/>
            <input type="button" value="6" onclick="kick('6')"/>
            <input type="button" value="-" onclick="kick('-')"/>
            <input type="button" value="1" onclick="kick('1')"/>
            <input type="button" value="2" onclick="kick('2')"/>
            <input type="button" value="3" onclick="kick('3')"/>
            <input type="button" value="*" onclick="kick('*')"/>
            <input type="button" value="0" onclick="kick('0')"/>
            <input type="button" value="C" onclick="kick('C')"/>
            <input type="button" value="=" onclick="kick('=')"/>
            <input type="button" value="/" onclick="kick('/')"/>
        </div>
    </div>
</div>
</body>
<script>
    var showInput = document.getElementById("input1");
    var isClear = false;
    var tempStr = "";
    var clacType = "";
    var isContinue = true;
    function kick(clickValue) {
        switch (clickValue) {
            case "=":
                if (tempStr != "" && clacType != "") {
                    showInput.value = clac(tempStr, showInput.value, clacType);
                    isContinue = false;
                    clacType = "";
                }
                break;
            case "+":
            case "-":
            case "*":
            case "/":
                //如果预存的操作符不为空 表示表示连续操作
                if (clacType != "" && !isContinue) {  //先执行计算
                    tempStr = clac(tempStr, showInput.value, clacType);
                    isClear = true;
                    clacType = clickValue;
                } else {
                    tempStr = showInput.value; //点击操作符之后 预存字符
                    isClear = true;//表示点击了操作符
                    clacType = clickValue;//预存操作符
                }
                isContinue = true;
                break;
            case "C":
                showInput.value = "0";
                isClear = false;
                tempStr = "";
                clacType = "";
                break;
            default://普通的数字按钮点击
                showInput.value = showInput.value == "0" ? "" : showInput.value;
                isContinue = false;
                if (isClear) {
                    showInput.value = "";
                    showInput.value += clickValue;
                    isClear = false;
                } else {
                    showInput.value += clickValue;
                }
                break;
        }
    }


    function clac(num1, num2, type) {
        switch (type) {
            case "+":
                return Number(num1) + Number(num2);
            case "-":
                return Number(num1) - Number(num2);
            case "*":
                return Number(num1) * Number(num2);
            case "/":
                return Number(num1) / Number(num2);
            default:
                break;
        }
     }
   </script>

万花果子

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
JavaScript 不用eval制作简易计算器

<head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none;
复制链接

扫一扫