JavaScript实现简易计算器功能的两种方法

当需要在网页上实现简单的数学计算时，我们可以使用JavaScript来实现一个简易的计算器，下面介绍两种方法。

方法一：使用eval()函数实现计算器功能

1. 在HTML文件中添加一个文本输入框和一个按钮：

<input type="text" id="num">
<button onclick="calculate()">计算</button>

1. 在JavaScript文件中编写calculate()函数：

function calculate() {
    var num = document.getElementById("num").value;
    var result = eval(num);
    alert("计算结果：" + result);
}

1. 在输入框中输入计算式，点击按钮即可输出结果。

示例

假设我们要计算3 + 5 * 2，我们在输入框中输入3+5*2，点击“计算”按钮，弹出“计算结果：13”提示框。

方法二：使用eval()函数和正则表达式实现计算器功能

1. 在HTML文件中添加文本输入框和按钮：

<input type="text" id="num">
<button onclick="calculate()">计算</button>

1. 在JavaScript文件中编写calculate()函数：

function calculate() {
    var num = document.getElementById("num").value;
    var pattern = /(\d+)([+*-\/])(\d+)/;
    var match = num.match(pattern);
    var result;
    if(match) {
        var num1 = parseInt(match[1]);
        var operand = match[2];
        var num2 = parseInt(match[3]);
        switch(operand) {
            case "+":
                result = num1 + num2;
                break;
            case "-":
                result = num1 - num2;
                break;
            case "*":
                result = num1 * num2;
                break;
            case "/":
                result = num1 / num2;
                break;
        }
        alert("计算结果：" + result);
    } else {
        alert("请输入正确的计算式");
    }
}

1. 在输入框中输入带有加减乘除的计算式，点击按钮即可输出结果。

示例

假设我们要计算3 + 5 * 2，我们在输入框中输入3+5*2，点击“计算”按钮，弹出“计算结果：13”提示框。如果我们输入的是3+5a2，会弹出“请输入正确的计算式”提示框。

以上两种方法都可以实现简易计算器功能，但使用eval()函数的方法存在安全隐患，因此使用正则表达式的方法更为安全可靠。