JavaScript實現(xiàn)簡單網(wǎng)頁版計算器

更新時間：2021年08月08日 10:45:13 作者：run_bear

這篇文章主要介紹了JavaScript實現(xiàn)簡單網(wǎng)頁版計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

背景

由于我又被分進了一個新的項目組，該項目需要用js，因為我沒接觸過，所以領導準備給我一周時間學習，沒錯，實現(xiàn)一個簡單的支持四則混合運算的計算器就是作業(yè)，所以有了這篇文章
故，這篇文章主要重點就不在html和css了，畢竟我也只是略懂皮毛，并未深究過

實現(xiàn)效果

最終展現(xiàn)的頁面如下圖，當鼠標點擊按鍵時，按鍵會變色，可以進行四則混合運算

上面一行顯示計算式，當按下“=”時，顯示計算結果

用到的技術

計算器的頁面是使用html的table繪制的
按鍵的大小，顏色，鼠標懸浮變色是用css設置的
點擊按鍵將按鍵上的值和計算結果顯示在最上面一行、完成四則混合運算是用js做的

實現(xiàn)思路

這里我分了三個文件，一個.html 一個 .css 一個 .js

1、先寫了html和css，繪制出來網(wǎng)頁展示的樣子，此處不細說，有興趣可以直接看代碼
2、然后用js的DOM事件，給不同類型的按鈕加上點擊事件，調用不同的js函數(shù)。
這一步我開始只是先寫了一個函數(shù)定義，主要是為了先劃分清楚邏輯，比如按某個按鍵應該實現(xiàn)哪些功能，顯示什么效果等，后面對函數(shù)進行填充邏輯就不會亂掉
3、最后去實現(xiàn)js函數(shù)，也就是完成四則混合運算，重點說一下是怎么實現(xiàn)四則混合運算并且讓結果顯示出來的

上面顯示算式和結果的時候，我定義了一個全局變量的數(shù)組，每次點擊按鍵，就把點擊的那個按鍵的值push到數(shù)組里，這樣顯示的時候就直接把數(shù)組丟過去。這樣做的還有一個原因是點擊退格鍵的時候就pop一下，點擊清空鍵的時候就直接賦個空數(shù)組給數(shù)組變量，操作起來會容易一些

接著很重要的一步是計算表達式，比如說輸入 3 * 4.5 - 1= 這樣的一個表達式，怎么去求值呢，我想到的方法是先把輸入的數(shù)組變成變成中綴表達式，再由中綴表達式轉成后綴表達式，然后再進行后綴表達式求值

1. 首先通過上面的數(shù)組處理得到了這樣的一個數(shù)組['3','*','4','.','5','-','1']
2. 把這個數(shù)組轉換成字符串變?yōu)檫@樣 “3*4.5-1”
3. 接著處理成操作符和數(shù)字分開的新的數(shù)組 ['3','*','4.5','-','1']
4. 處理完之后就是利用棧來將中綴表達式變?yōu)楹缶Y表達式
5. 再利用棧對后綴表達式求值，并且將結果填在=之后

由于4.5步是數(shù)據(jù)結構中棧應用的內(nèi)容，不清楚的可以回顧一下數(shù)據(jù)結構，至此就全部完成

具體實現(xiàn)代碼

如上，分析的已經(jīng)夠多了，所以這塊就話不多說，直接上代碼

.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();
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
計算器

javascript實現(xiàn)tab切換的兩個實例
這篇文章主要介紹了javascript實現(xiàn)tab切換的兩個實例，是對之前方法原理的進一步延伸，需要深入了解的同學可以參考一下
2015-11-11
Bootstrap每天必學之折疊（Collapse）插件
Bootstrap每天必學之折疊（Collapse）插件，折疊插件可以很容易地讓頁面區(qū)域折疊起來，感興趣的小伙伴們可以參考一下
2016-04-04
Javascript自定義排序 node運行實例
Javascript自定義排序 node運行實例，需要的朋友可以參考一下
2013-06-06
preact組件案例的使用詳解
SelectValue是一個Preact組件,用于創(chuàng)建一個下拉選擇框,它接收props如value、setfn、options和disabled,用于更新父組件中的值、處理下拉選擇框的值改變事件、顯示選項和禁用或啟用下拉選擇框,本文介紹preact組件案例的使用詳解,感興趣的朋友一起看看吧
2025-03-03
jquery庫文件略龐大用純js替換jquery的方法
jquery庫文件略龐大，因此在某些情況下就需要用純js替換jquery,需要的朋友可以參考下
2014-08-08
JavaScript實現(xiàn)簡單動態(tài)表格
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單動態(tài)表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
javascript之大字符串的連接的StringBuffer 類
javascript之大字符串的連接的StringBuffer 類...
2007-05-05
JavaScript實現(xiàn)動態(tài)網(wǎng)頁飄落的雪花
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)動態(tài)網(wǎng)頁飄落的雪花，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
JS+CSS實現(xiàn)過渡特效
這篇文章主要為大家詳細介紹了JS+CSS實現(xiàn)過渡特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
Javascript 數(shù)組去重的方法（四種）詳解及實例代碼
這篇文章主要介紹了Javascript 數(shù)組去重的方法（四種）詳解及實例代碼的相關資料,這里對四種去重方法進行了詳細介紹，并附代碼實例，需要的朋友可以參考下
2016-11-11