欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2021年08月08日 10:45:13   作者：run_bear  
這篇文章主要介紹了JavaScript實現(xiàn)簡單網(wǎng)頁版計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

背景

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

實現(xiàn)效果

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

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

用到的技術(shù)

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

實現(xiàn)思路

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

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

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

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

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

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

具體實現(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論