快捷導(dǎo)航

JavaScript實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)版計(jì)算器

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

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

背景

由于我又被分進(jìn)了一個(gè)新的項(xiàng)目組，該項(xiàng)目需要用js，因?yàn)槲覜](méi)接觸過(guò)，所以領(lǐng)導(dǎo)準(zhǔn)備給我一周時(shí)間學(xué)習(xí)，沒(méi)錯(cuò)，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的支持四則混合運(yùn)算的計(jì)算器就是作業(yè)，所以有了這篇文章
故，這篇文章主要重點(diǎn)就不在html和css了，畢竟我也只是略懂皮毛，并未深究過(guò)

實(shí)現(xiàn)效果

最終展現(xiàn)的頁(yè)面如下圖，當(dāng)鼠標(biāo)點(diǎn)擊按鍵時(shí)，按鍵會(huì)變色，可以進(jìn)行四則混合運(yùn)算

上面一行顯示計(jì)算式，當(dāng)按下“=”時(shí)，顯示計(jì)算結(jié)果

用到的技術(shù)

計(jì)算器的頁(yè)面是使用html的table繪制的
按鍵的大小，顏色，鼠標(biāo)懸浮變色是用css設(shè)置的
點(diǎn)擊按鍵將按鍵上的值和計(jì)算結(jié)果顯示在最上面一行、完成四則混合運(yùn)算是用js做的

實(shí)現(xiàn)思路

這里我分了三個(gè)文件，一個(gè).html 一個(gè) .css 一個(gè) .js

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

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

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

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

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

具體實(shí)現(xiàn)代碼

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: