JavaScript初学——计算器的实现

在学习JavaScript之前，知道如果需要做一个加减法运算需要调用到后端的数据处理，前端在没有js运算的情况下无法实现，但是在制作完简易版本的“输入数字型计算器”后，便想着，如果计算器的实现能够和我们日常使用的计算器一样，那么就可以免去了自己选或者打错字符的烦恼，因此打算制作一个JavaScript计算器，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript计算器</title>
    <style type="text/css">
        input{
            width:60px;
            height: 20px;
        }
    </style>
    <script type="text/javascript">
        //定义无参函数
        function  numDemo(){
            //使用.value方法获取值
            var n1 =parseInt(document.getElementById("num1").value);
            var n2 =parseInt(document.getElementById("num2").value);
            var oper =document.getElementById("oper").value;
            var rst;
            //定义运算
            switch (oper) {
                case "+" :
                rst = n1 + n2 ;
                break;
                case "-" :
                rst = n1 - n2 ;
                break;
                case "*" :
                rst = n1 * n2 ;
                break;
                case "/" :
                rst = n1 / n2 ;
                break;
                default:
                rst="错误方式";
                break;
            }
            //return rst;//无参函数内不能return
            document.getElementById("rst").value=rst;
        }
    </script>
</head>
<body>
    <input type="number" id="num1" name="one" autofocus="autofocus">
    <select id="oper" >
        <option value='+'>+</option>
        <option value='-'>-</option>
        <option value='x'>*</option>
        <option value='÷'>/</option>
    </select>
    <input type="number" id="num2" name="two"/>=
    <input type="text" id="rst" disabled/>
    <button type="button" onclick="numDemo()">&nbsp;计算&nbsp;</button>
</body>
</html>

JavaScript初学——计算器的实现

猜你喜欢