使用JS实现支持四则混合运算的网页计算器教程

背景

由于我被分配到一个新的项目组，该项目需要使用JavaScript。因为我之前没有接触过这门语言，领导安排了一周的学习时间。作为学习任务，我需要实现一个支持四则混合运算的简单计算器，这也促成了本文的撰写。因此，本文的重点不在于HTML和CSS，因为我对此仅略知皮毛，并未深入钻研。

实现效果

最终页面效果如图所示。当鼠标点击按键时，按键颜色会发生变化，并支持进行四则混合运算。

界面上方一行用于显示计算表达式，当按下“=”键时，将显示计算结果。

用到的技术

计算器的页面布局使用HTML的table元素绘制。按键的大小、颜色以及鼠标悬停时的变色效果由CSS设置。点击按键将按键上的数值和计算结果显示在最上方一行，并完成四则混合运算，这部分逻辑由JavaScript实现。

实现思路

这里我将代码分为了三个文件：一个.html文件、一个.css文件和一个.js文件。

1、首先编写HTML和CSS，绘制出网页展示的样子，此处不再赘述，有兴趣可以直接查看代码。 2、然后使用JavaScript的DOM事件，为不同类型的按钮添加点击事件，并调用不同的JavaScript函数。这一步开始时，我先定义了一个函数框架，主要是为了理清逻辑，例如按下某个按键应该实现哪些功能、显示什么效果等，后续对函数填充具体逻辑时就不会混乱。 3、最后实现JavaScript函数，即完成四则混合运算。这里重点说明如何实现四则混合运算并将结果显示出来。

在显示算式和结果时，我定义了一个全局变量数组。每次点击按键，就将该按键的值push到数组中，这样显示时直接将数组传递过去即可。这样做还有一个好处：当点击退格键时，只需pop一次；点击清空键时，直接将数组变量赋值为空数组，操作起来更加简便。

接着是计算表达式的关键步骤。例如输入“3 * 4.5 - 1=”，如何求值？我的思路是先将输入的数组转换为中缀表达式，再由中缀表达式转换为后缀表达式，最后进行后缀表达式求值。

1. 首先通过上述数组处理得到这样一个数组：['3','*','4','.','5','-','1']。 2. 将该数组转换为字符串，变为“3*4.5-1”。 3. 接着处理成操作符和数字分开的新的数组：['3','*','4.5','-','1']。 4. 处理完毕后，利用栈将中缀表达式转换为后缀表达式。 5. 再利用栈对后缀表达式进行求值，并将结果填在“=”之后。

鉴于4.5步涉及数据结构中栈的应用，若对此不熟悉，建议回顾数据结构知识，至此全部内容已阐述完毕

具体实现代码

如上所述，分析已经足够详细，因此这里不再多言，直接展示代码。

.html文件


<!DOCTYPE html>
<html>
    <head>
        <title>calculator</title>
        <link rel="stylesheet" href="calculator.css" >
        <script src="calculator.js"></script>
    </head>

    <body>
        <div>
            <table border="1">
                <thead>
                    <th colspan="4">
                        <input type="text" id="result" disabled>
                    </th>
                </thead>

                <tbody>
                    <tr>
                        <td><button class="operate" onclick="showNumber(this)">(</button></td>
                        <td><button class="operate" onclick="showNumber(this)">)</button></td>
                        <td><button class="operate" onclick="clearOneResult()">←</button></td>
                        <td><button class="operate" onclick="clearResult()">C</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">7</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">8</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">9</button></td>
                        <td><button class="operate" onclick="showNumber(this)">*</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">4</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">5</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">6</button></td>
                        <td><button class="operate" onclick="showNumber(this)">-</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">1</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">2</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">3</button></td>
                        <td><button class="operate" onclick="showNumber(this)">+</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">0</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">.</button></td>
                        <td><button class="operate" onclick="showNumber(this)">/</button></td>
                        <td><button class="operate" onclick="showAnswer()">=</button></td>
                    </tr>
                </tbody>         
            </table>
        </div>
    </body>
</html>

.css文件


table{
    margin: 20px;
    padding: 1px;
}

th,input{
    height: 120px;
    width: 410px;
    background-color:rgb(233, 232, 232);
    text-align: right;
    font-size: 40px;
}


button{
    height: 100px;
    width: 100px;
    padding: 0px;
    font-size: 30px;
}

th,input,td,button{
    border: 0px;
}

.calculate{
    background-color: rgb(231, 231, 235);
}

.operate{
    color: coral;
}

button:hover{
    background-color: rgb(147, 241, 253);
}

.js文件


var result = new Array();
var ops = "+-*/";

function arrToStr(arr) {
    var strResult = "";
    for (var i = 0; i < arr.length; i++) {
        strResult += arr[i];
    }
    return strResult;
}


function showResult() {
    document.getElementById("result").value = arrToStr(result);
}


function showNumber(id) {
    var val = id.innerHTML;
    result.push(val);
    showResult();
}


function showAnswer() {

    var answer = "";
    var str = arrToStr(result);

    var midExpre = strToExpress(str);
    var suffixExpre = midToSuffix(midExpre);
    answer = suffixValue(suffixExpre);

    //console.log(midExpre);
    //console.log(suffixExpre);

    document.getElementById("result").value = str + "=" + answer;

}


function clearResult() {
    result = [];
    showResult();
}


function clearOneResult() {
    result.pop();
    showResult();
}


function strToExpress(str) {

    var textArr = str.split('');
    var newTextArr = [];
    var calTextArr = [];

    for (var i = 0; i < str.length; i++) {
        if (ops.indexOf(str[i]) != -1  ) {
        
            newTextArr.push("|", str[i], "|");
        }
        else if (str[i] == '('){
            newTextArr.push(str[i], "|");
        }
        else if (str[i] == ')'){
            newTextArr.push("|", str[i]);
        }
        else {
            newTextArr.push(textArr[i]);
        }
    }

    calTextArr = newTextArr.join('').split('|');

    return calTextArr;
}


function midToSuffix(midExpre) {

    var opStack = [];
    var suffixExpre = [];

    for (var i = 0; i < midExpre.length; i++) {

        if (ops.indexOf(midExpre[i]) != -1 || midExpre[i] == '(' || midExpre[i] == ')' ) {

            if (midExpre[i] == '(' || opStack[opStack.length - 1] == '(') {
                opStack.push(midExpre[i]);
            }

            else if (midExpre[i] == ')') {
                do {
                    suffixExpre.push(opStack.pop());
                } while (opStack[opStack.length - 1] != '(');
                opStack.pop();
            }
            else if (opStack.length == 0 || Priority(midExpre[i]) > Priority(opStack[opStack.length - 1])) {
                opStack.push(midExpre[i]);
            }
            else {
                do {
                    suffixExpre.push(opStack.pop());
                } while (opStack.length > 0 && Priority(midExpre[i]) <= Priority(opStack[opStack.length - 1]));

                opStack.push(midExpre[i]);
            }
        }

        else {
            suffixExpre.push(midExpre[i]);
        }
    }

    while (opStack.length > 0) {
        suffixExpre.push(opStack.pop());
    }

    return suffixExpre;
}

function Priority(op) {
    var opPri = 0;
    switch (op) {
        case "+":
            opPri = 1;
            break;
        case "-":
            opPri = 1;
            break;
        case "*":
            opPri = 2;
            break;
        case "/":
            opPri = 2;
            break;

    }
    return opPri;
}

function suffixValue(suffixExpre) {
    var calStack = [];

    console.log(suffixExpre);
    for (var i = 0; i < suffixExpre.length; i++) {
        if (ops.indexOf(suffixExpre[i]) != -1) {
            var opRight = Number(calStack.pop());
            var opLeft = Number(calStack.pop());
            var tmpResult = 0;
            switch (suffixExpre[i]) {
                case '+':
                    tmpResult = opLeft + opRight;
                    break;
                case '-':
                    tmpResult = opLeft - opRight;
                    break;
                case '*':
                    tmpResult = opLeft * opRight;
                    break;
                case '/':
                    tmpResult = opLeft / opRight;
                    break;
            }
            calStack.push(tmpResult);
        }
        else {
            calStack.push(suffixExpre[i]);
        }

        console.log(calStack);
    }

    return calStack.pop();
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

JavaScript实现简单网页版计算器

背景

实现效果

用到的技术

实现思路

具体实现代码

实用工具推荐