JavaScript实现一个简易计算器，能够混合运算

最新推荐文章于 2023-12-06 17:01:12 发布
小何小何h
最新推荐文章于 2023-12-06 17:01:12 发布
阅读量254
点赞数
文章标签： javascript
本文链接：https://blog.csdn.net/weixin_53754024/article/details/129735953
版权
<!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>Document</title>
    <style>
            table{
                margin: auto;
                padding: 1px;
            }

            th,input{
                height: 60px;
                width: 410px;
                background-color:rgb(247,246,246);
                text-align: right;
                font-size: 40px;
            }


            button{
                height: 100px;
                width: 100px;
                padding: 0px;
                font-size: 30px;
                border-radius: 50%;
            }

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

            .calculate{
                background-color: rgb(181,181,183);
            }

            .operate{
                color: rgb(136,93,235);
                background-color: rgb(101,216,247);
            }

            button:hover{
                background-color: rgb(243, 157, 236);
            }
        </style>

</head>

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

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


    <script>
        // 定义一个数组
        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() {
            var str = arrToStr(result);
            var arr = str.split("=");
            // 将计算过程显示在显示屏上半部分
            document.getElementById("infor").value = arr[0];
            // document.getElementById("result").value = arrToStr(result);
        }


        function showNumber(id) {
            var val = id.innerHTML;
            // 将数据存入result数组中
            result.push(val);
            // 调用showResult()方法
            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();
            // 清空结果显示0
            document.getElementById("result").value = 0;
        }

        // 删除录入的数据，从右向左依次一个一个的进行删除
        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中
                    newTextArr.push("|", str[i], "|");
                }
                else {
                    newTextArr.push(textArr[i]);
                }
            }

            calTextArr = newTextArr.join('').split('|');
            // alert(calTextArr); //calTextArr=1,+,3,*,6
            return calTextArr;
        }


        function midToSuffix(midExpre) {

            var opStack = [];
            var suffixExpre = [];
            // alert(midExpre);

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

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

                    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());
            }
            // alert(suffixExpre);//suffixExpre={1,3,6,*,+}
            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;
                case "%":
                    opPri = 2;

            }
            return opPri;
        }

        function suffixValue(suffixExpre) {
            var calStack = [];
            // alert(suffixExpre);//1,3,6,*,+
            console.log(suffixExpre);
            for (var i = 0; i < suffixExpre.length; i++) {
                // if(suffixExpre[i] == "+-"){

                // }else 
                if (ops.indexOf(suffixExpre[i]) != -1) {
                    // alert(calStack);
                    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;
                        case '%':
                            tmpResult = opLeft % opRight;
                            // alert(tmpResult);
                    }
                    calStack.push(tmpResult);
                }
                else {
                    calStack.push(suffixExpre[i]);
                }

                console.log(calStack);
            }

            return calStack.pop();
            
        }


    </script>

</body>

</html>