通过简单的js代码实现简易计算器

最新推荐文章于 2023-10-18 23:32:22 发布

IT锦囊

最新推荐文章于 2023-10-18 23:32:22 发布

阅读量1.1k

点赞数

分类专栏：实训文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45141180/article/details/117745908

版权

实训专栏收录该内容

7 篇文章 0 订阅

订阅专栏

通过简单的js代码实现简易计算器

<!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>简易计算器</title>
    <style>
        .box {
            width: 800px;
            margin: 100px auto;
        }
        
        li {
            list-style: none;
            text-align: center;
            margin: 22px auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <input type="number" name="num1">
                <select name="operator" id="">
                    <option>请选择运算符</option>
                    <option>运算符【+】</option>
                    <option>运算符【-】</option>
                    <option>运算符【*】</option>
                    <option>运算符【/】</option>
                </select>
                <input type="number" name="num2"> =
                <input type="number" name="sum">
            </li>
            <li>
                <button>计算</button>
            </li>
        </ul>
    </div>
    <script>
        // 获取需要操作的元素
        var num = document.querySelectorAll("input");
        var button = document.querySelector("button");
        var option = document.querySelectorAll("select");

        // 当文本框失去焦点的时候判断书否输入运算数
        num[0].onblur = function() {
            if (num[0].value === "") {
                alert("请输入第一个参与运算的数！！！");
            }
        };

        num[1].onblur = function() {
            if (num[0].value === "") {
                alert("请输入第二个参与运算的数！！！");
            }
        };

        // 点击按钮事件
        button.onclick = function() {
            // 获取当前选中符号的索引号
            var index = option[0].selectedIndex;

            // 字符串截取 获取运算符
            var symbol = (option[0].options[index].value.substr(4, 1));

            // 获取运算数
            var num1 = parseInt(num[0].value);
            var num2 = parseInt(num[1].value);

            // 控制台输出参与计算的表达式
            console.log("num1 = " + num1);
            console.log("num2 = " + num2);
            console.log("index = " + index);
            console.log("运算符：" + symbol);

            // 计算输出结果
            switch (index) {
                case 0:
                    alert("请选择运算符并输入需要计算的数字...");
                    break;
                case 1:
                    num[2].value = num1 + num2;
                    break;
                case 2:
                    num[2].value = num1 - num2;
                    break;
                case 3:
                    num[2].value = num1 * num2;
                    break;
                case 4:
                    num[2].value = num1 / num2;
                    break;
                default:
                    alert("计算有误！！！");
                    break;
            }
        }
    </script>
</body>

</html>

通过简单的js代码实现简易计算器

IT锦囊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过简单的js代码实现简易计算器

通过简单的js代码实现简易计算器<!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">
复制链接

扫一扫