纯javascript代码实现计算器功能(三种方法)

当我们想在网页中添加一个计算器功能的时候，可以使用Javascript来实现。以下是三种使用Javascript实现计算器功能的方法：

方法一：利用eval()函数计算表达式

在HTML文档中添加以下代码：

<div id="container">
    <input type="text" id="display" readonly>
    <div class="buttons">
        <button onClick="addToDisplay('1')">1</button>
        <button onClick="addToDisplay('2')">2</button>
        <button onClick="addToDisplay('3')">3</button>
        <button onClick="addToDisplay('+')">+</button>
        <br>
        <button onClick="addToDisplay('4')">4</button>
        <button onClick="addToDisplay('5')">5</button>
        <button onClick="addToDisplay('6')">6</button>
        <button onClick="addToDisplay('-')">-</button>
        <br>
        <button onClick="addToDisplay('7')">7</button>
        <button onClick="addToDisplay('8')">8</button>
        <button onClick="addToDisplay('9')">9</button>
        <button onClick="addToDisplay('*')">*</button>
        <br>
        <button onClick="addToDisplay('0')">0</button>
        <button onClick="addToDisplay('.')">.</button>
        <button onClick="calculate()">=</button>
        <button onClick="addToDisplay('/')">/</button>
        <br>
    </div>
</div>

在Javascript文件中添加以下代码：

function addToDisplay(s) {
    //获取输入框元素
    var display = document.getElementById("display");
    display.value += s;
}

function calculate() {
    //获取输入框元素
    var display = document.getElementById("display");
    //利用eval()函数计算表达式
    try {
        display.value = eval(display.value);
    } catch (e) {
        alert("Invalid Input");
        display.value = "";
    }
}

将以上代码加入到HTML文档和Javascript文件中后，即可实现简单的计算器功能。在网页中输入数字和运算符，点击等号可以计算结果。需注意，eval函数执行字符串包含的JS代码，需要注意安全风险。

方法二：使用自定义计算器引擎计算表达式

在Javascript文件中添加以下代码：

//自定义计算器引擎
var calculator = {
    total: 0,
    operation: "+",
    clear: function () {
        this.total = 0;
        this.operation = "+";
    },
    add: function (n) {
        this.total += n;
    },
    subtract: function (n) {
        this.total -= n;
    },
    multiply: function (n) {
        this.total *= n;
    },
    divide: function (n) {
        this.total /= n;
    },
    calculate: function (s) {
        var arr = s.match(/[\d\.]+|[^\d\.]+/g);
        var num = parseFloat(arr.shift());
        while (arr.length > 0) {
            var op = arr.shift();
            var nxt = parseFloat(arr.shift());
            switch (op) {
                case "+":
                    this.add(nxt);
                    break;
                case "-":
                    this.subtract(nxt);
                    break;
                case "*":
                    this.multiply(nxt);
                    break;
                case "/":
                    this.divide(nxt);
                    break;
                default:
                    throw "Invalid Operator";
            }
        }
        return this.total;
    }
}

function addToDisplay(s) {
    //获取输入框元素
    var display = document.getElementById("display");
    display.value += s;
}

function calculate() {
    //获取输入框元素
    var display = document.getElementById("display");
    //使用自定义计算器引擎计算表达式
    try {
        display.value = calculator.calculate(display.value);
    } catch (e) {
        alert(e);
        display.value = "";
    }
}

将以上代码加入到Javascript文件中后，在HTML文档中添加以下代码：

<div id="container">
    <input type="text" id="display" readonly>
    <div class="buttons">
        <button onClick="addToDisplay('1')">1</button>
        <button onClick="addToDisplay('2')">2</button>
        <button onClick="addToDisplay('3')">3</button>
        <button onClick="addToDisplay('+')">+</button>
        <br>
        <button onClick="addToDisplay('4')">4</button>
        <button onClick="addToDisplay('5')">5</button>
        <button onClick="addToDisplay('6')">6</button>
        <button onClick="addToDisplay('-')">-</button>
        <br>
        <button onClick="addToDisplay('7')">7</button>
        <button onClick="addToDisplay('8')">8</button>
        <button onClick="addToDisplay('9')">9</button>
        <button onClick="addToDisplay('*')">*</button>
        <br>
        <button onClick="addToDisplay('0')">0</button>
        <button onClick="addToDisplay('.')">.</button>
        <button onClick="calculate()">=</button>
        <button onClick="addToDisplay('/')">/</button>
        <br>
    </div>
</div>

现在，使用自定义计算器引擎计算表达式的方法，即可实现网页计算器。在网页中输入数字和运算符，点击等号即可计算出结果。

方法三：使用Vue.js实现计算器

在HTML文档中添加以下代码：

<div id="calculator">
    <input type="text" v-model="display" readonly>
    <div class="buttons">
        <button v-on:click="addToDisplay('1')">1</button>
        <button v-on:click="addToDisplay('2')">2</button>
        <button v-on:click="addToDisplay('3')">3</button>
        <button v-on:click="addToDisplay('+')">+</button>
        <br>
        <button v-on:click="addToDisplay('4')">4</button>
        <button v-on:click="addToDisplay('5')">5</button>
        <button v-on:click="addToDisplay('6')">6</button>
        <button v-on:click="addToDisplay('-')">-</button>
        <br>
        <button v-on:click="addToDisplay('7')">7</button>
        <button v-on:click="addToDisplay('8')">8</button>
        <button v-on:click="addToDisplay('9')">9</button>
        <button v-on:click="addToDisplay('*')">*</button>
        <br>
        <button v-on:click="addToDisplay('0')">0</button>
        <button v-on:click="addToDisplay('.')">.</button>
        <button v-on:click="calculate()">=</button>
        <button v-on:click="addToDisplay('/')">/</button>
        <br>
    </div>
</div>

在Javascript文件中添加以下代码：

new Vue({
    el: '#calculator',
    data: {
        display: '0'
    },
    methods: {
        addToDisplay: function(s) {
            //添加数字或运算符
            this.display += s;
        },
        calculate: function() {
            //使用自定义计算器引擎计算表达式
            try {
                this.display = calculator.calculate(this.display);
            } catch (e) {
                alert(e);
                this.display = "";
            }
        }
    }
})

将以上代码加入到Javascript文件中后，在HTML中添加Vue.js的库文件。现在，使用Vue.js实现计算器的方法，即可实现网页计算器。

以上是三种使用Javascript实现计算器功能的方法。通过以上示例，我们可以学习到如何使用eval()函数计算表达式，如何使用自定义计算器引擎计算表达式，以及如何使用Vue.js实现计算器。可以根据自己的需要选择合适的方法来实现网页计算器。