JS简易计算器

激进的土豆

已于 2022-08-24 18:35:33 修改

阅读量493

点赞数 3

分类专栏： html+css+js 文章标签： javascript 前端 servlet

于 2022-08-24 14:06:05 首次发布

本文链接：https://blog.csdn.net/weixin_49627122/article/details/126502888

版权

html+css+js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

简易计算器：

两个文本框里输入数字，在select框里选择应用方法，点击=号按钮，在第三个文本框里出现内容：

<!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>
        <!-- 文本框输入的内容是文本框的value值 -->
        <input type="text" id="num1">
        <select id="select">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" id="num2">
        <button onclick="fun()">=</button>
        <input type="text" id="num3" readonly>


        <script>
        function fun(){
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            var operator = document.getElementById("select").value;
            var num;
            //判断输入的两个数字是否为数字,如果为数字，返回结果为false
            var isNotNumber = isNaN(num1) || isNaN(num2);
        if (!isNotNumber) {
            switch (operator) {
                case "+":
                    num=Number(num1)+Number(num2);
                    break;
                case "-":
                    num = num1 - num2;
                    break;
                case "*":
                    num = num1 * num2;
                    break;
                case "/":
                    if (num2 == 0) {
                        // 除数不能为0
                        alert("除数不能为0,请重新输入");
                    } else {
                        num = num1 / num2;
                    }
                    break;
                default:
                    alert("请输入正确的运算符！！！");
            }
            document.getElementById("num3").value = num;
        } else {
            alert("请输入数字！！！")
        }
    }
    </script>
    </body>
</html>

附增功能：

通过ol,li增加历史记录：

li后添加一个button按钮，可以进行删除操作：

<body>
        <!-- 文本框输入的内容是文本框的value值 -->
        <input type="text" id="num1">
        <select id="select">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" id="num2">
        <button onclick="fun()">=</button>
        <input type="text" id="num3">
        <ol id="ol">
        </ol>
        <script>
    function fun(){
        var num1 = document.getElementById("num1").value;
        var num2 = document.getElementById("num2").value;
        var operator = document.getElementById("select").value;
        var num=eval(num1+operator+num2);
        var sum=num1+operator+num2+"="+num;
        let li = document.createElement("li");
        let ol=document.querySelector("#ol");
        let bu = document.createElement("span");
        bu.innerHTML="<button onclick='del(this)'>删除</button>";
        li.append(sum);
        li.append(bu);
        ol.append(li);
    }
    function del(obj){
        //获取父节点(span)的父节点:li;
        let bb=obj.parentNode.parentNode;
        bb.remove();
        }
    </script>
</body>