编程基础网 / 编程教程 / 编程语言 / Java开发 / 正文

js表达式计算器代码

编程基础网 Java开发

2023-12-16

以下是“JS表达式计算器代码”的完整攻略：

以下是“JS表达式计算器代码”的完整攻略：

概述

JS表达式计算器代码是一个基于JavaScript语言，可以实现简单的表达式计算的小程序。

实现步骤

创建HTML文件，包含输入框、按钮和输出框等必要元素。
编写JavaScript代码，实现计算功能。
1. 获取输入框里的表达式。
2. 利用正则表达式匹配数字和运算符，并将它们保存在数组中。
3. 计算表达式的值。
4. 将计算结果显示在输出框中。

下面是代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS表达式计算器</title>
</head>
<body>
    <input id="expression" type="text" placeholder="请输入表达式" />
    <button onclick="calculate()">计算</button>
    <br />
    <br />
    <input id="result" type="text" placeholder="计算结果" />
</body>
<script>
    function calculate() {
        const expression = document.getElementById("expression").value;
        const numbers = expression.match(/\d+/g).map(Number); // 匹配数字并转为Number类型
        const operators = expression.match(/[\+\-\*\/]/g);
        let result = numbers[0];
        for (let i = 1; i < numbers.length; i++) {
            switch (operators[i - 1]) {
                case "+":
                    result += numbers[i];
                    break;
                case "-":
                    result -= numbers[i];
                    break;
                case "*":
                    result *= numbers[i];
                    break;
                case "/":
                    if (numbers[i] === 0) {
                        alert("被除数不能为0！");
                        return;
                    }
                    result /= numbers[i];
                    break;
            }
        }
        document.getElementById("result").value = result;
    }
</script>
</html>

示例说明：