js实现简易计算器三种基础方法

歪大梨

于 2022-09-06 15:42:47 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_64037609/article/details/126726602

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

if-else 实现

switch实现

三元运算符实现

if-else 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        请输入第一个数：<input type="text"><br>
        <select name="" id="" >
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
            <option value="%">%</option>
        </select>
        <br>
        请输入第二个数：<input type="text"><br>
        <button>结果</button><input type="text">
    </div>
    <script>
        var inps =document.getElementsByTagName("input");
        var btn =document.getElementsByTagName("button")[0];
        var se =document.getElementsByTagName("select")[0];
        btn.onclick =function () {
            var n1 =inps[0].value*1;
            var n2 =inps[1].value*1;
            console.log(se.value);
            
            if (se.value=="+") {
                inps[2].value=n1+n2;
                
            }
            else if (se.value=="-") {
                inps[2].value=n1-n2;
            }
            else if (se.value=="*") {
                inps[2].value=n1*n2;
            }
            else if (se.value=="/") {
                inps[2].value=n1/n2;
            }
            else {
                inps[2].value=n1%n2;
            }
            console.log(inps[2].value);
           
        }

    </script>
</body>
</html>

switch实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        请输入第一个数：<input type="text"><br>
        <select name="" id="" >
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
            <option value="%">%</option>
        </select>
        <br>
        请输入第二个数：<input type="text"><br>
        <button>结果</button><input type="text">
    </div>
    <script>
        var inps =document.getElementsByTagName("input");
        var btn =document.getElementsByTagName("button")[0];
        var se =document.getElementsByTagName("select")[0];
        btn.onclick =function () {
            var n1 =inps[0].value*1;
            var n2 =inps[1].value*1;
            console.log(se.value);
            switch (!!se.value) {
                case se.value=="+" : inps[2].value=n1+n2;break;
                case se.value=="-" : inps[2].value=n1-n2;break;
                case se.value=="*" : inps[2].value=n1*n2;break;
                case se.value=="/" : inps[2].value=n1/n2;break;
                default : inps[2].value=n1%n2;
            }
        }   
        

    </script>
</body>
</html>

三元运算符实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    操作数1：<input type="text">
    <br>
    <select id="sel">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
        <option value="%">%</option>
    </select>
    <br>
    操作数2：<input type="text">
    <br>
    <button>=</button>
    <br>
    结果：<input type="text">
    <script>
        //用户在前两个input中输入数字 并在select中选择运算符 
        //之后用户点击等于按钮 计算结果 并将结果设置为最后一个input的内容
        //1.获取元素
        var inps = document.getElementsByTagName("input");
        var sel = document.getElementsByTagName("select")[0];
        var btn = document.getElementsByTagName("button")[0];

        //2.给按钮添加点击事件
        btn.onclick = function(){
            //计算结果 并将结果设置为最后一个input的内容
            //3.获取用户输入的数字 和 运算符
            var n1 = inps[0].value - 0;
            var n2 = inps[1].value * 1;
            var op = sel.value;
            //4.判断运算符op是什么 我们就要做对应的运算
            var res = null;//声明一个变量 记录计算结果
            op=="+"?res = n1+n2 : op=="-"?res = n1-n2 : op=="*"? res=n1*n2: op=="/"? res=n1/n2 : res = n1%n2;
            //5.将结果设置为最后一个input的内容
            inps[2].value = res;
        }
    </script>
</body>
</html>