JavaScript初学——第二类型计算器的实现_支持设置二次计算的功能-优快云博客

本文介绍了从简单弹窗输入的第一类型计算器到界面直接运算的第二类型计算器的JavaScript实现过程，探讨了第二种方式的便捷性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，先说说第一类型计算器的实现，该类计算器只是简单的通过弹窗来实现输入，也就是每次输入完操作数、操作符号的时候，都要在弹窗当中点击一次“确定”才能进行下一步的操作，因此个人感觉十分的复杂，具体代码如下：

<!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>带参带返回值计算器</title>
    <script type="text/javascript">
        //先定义一个带参函数，内含计算方法(参数包含数字一、计算符号、数字二)
        function numDemo(num1,oper,num2){
            var num;//定义一个值，该值为返回值
            //定义计算方法
            switch(oper){
                case "+":
                num=num1+num2;
                break;
                case "-":
                num=num1-num2;
                break;
                case "*":
                num=num1*num2;
                break;
                case "/":
                num=num1/num2;
                break;
                default:
                num="请输入正确内容！";
                break;
            }
            return num;
        }
        //定义一个无参函数，给予numDemo方法参数
        function numDemo2(){
            var num3=prompt("请输入第一个数字："+"");
            var oper=prompt("请输入运算符号(仅限+-*/)："+"");
            var num4=prompt("请输入第二个数字："+"");
            var rst=numDemo(num3,oper,num4);//给予参数到计算方法中
            alert("运算结果为："+rst);
        }
    </script>
</head>
<body>
    <button type="button" onclick="numDemo2()">JS计算器二号</button>
</body>
</html>

而后，在觉得该类型较为麻烦的前提之下，试想，如果我们直接能够在同一界面当中完成计算器的运算会不会更为方便简洁，于是，便尝试一个，可以直接在界面使用的计算器，具体代码如下：

<!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>