原生JS怎么實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能

本篇內(nèi)容主要講解“原生JS怎么實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“原生JS怎么實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能”吧!

使用html和css寫(xiě)出計(jì)算器的基本結(jié)構(gòu)和樣式，用原生JS實(shí)現(xiàn)計(jì)算器的加減乘除運(yùn)算功能，只能計(jì)算簡(jiǎn)單的兩位數(shù)的運(yùn)算，不支持三個(gè)數(shù)連加或者連乘等等。一次計(jì)算完成之后再進(jìn)行下一次運(yùn)算不需要clear，可以直接進(jìn)行下次運(yùn)算。具體實(shí)現(xiàn)如下：

html結(jié)構(gòu)：

<div id="box">
        <!-- 文本框要禁止用戶輸入，只能通過(guò)代碼中的input.value來(lái)修改 -->
        <input id="display" type="text" value="0" disabled>    
        <div class="btn">1</div>
        <div class="btn">2</div>
        <div class="btn">3</div>
        <div class="btn">+</div>
        <div class="btn">4</div>
        <div class="btn">5</div>
        <div class="btn">6</div>
        <div class="btn">-</div>
        <div class="btn">7</div>
        <div class="btn">8</div>
        <div class="btn">9</div>
        <div class="btn">*</div>
        <div class="btn">C</div>
        <div class="btn">0</div>
        <div class="btn">=</div>
        <div class="btn">/</div>
</div>

css樣式：

#box {
            width: 500px;
            height: 600px;
            border: 1px solid #000000;
        }
 
        #display {
            width: 460px;
            height: 60px;
            margin: 15px;
            text-align: right;
            font-size: 60px;
            line-height: 60px;
            overflow: hidden;
            /* overflow: hidden;  溢出隱藏 */
            /* text-overflow: ellipsis;  文本溢出時(shí)顯示省略號(hào)  */
            /* word-wrap: none;   強(qiáng)制不換行 */
            background: #ffffff;
        }
 
        .btn {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
            float: left;
            margin: 10px 11px;
            font-size: 40px;
            line-height: 100px;
            text-align: center;
            user-select: none;
 }

JS代碼：

firstValue這個(gè)全局變量存儲(chǔ)第一次輸入的數(shù)，input的input.value屬性也是一個(gè)變量，這個(gè)值既作為頁(yè)面上顯示的內(nèi)容，也是輸入的數(shù)值。讓這兩個(gè)值進(jìn)行運(yùn)算，結(jié)果再顯示到輸入框中即可。bool變量作用：當(dāng)一次運(yùn)算完成之后所有數(shù)值清零。

如果要實(shí)現(xiàn)用上一次的結(jié)果繼續(xù)參與運(yùn)算這個(gè)功能，可以再設(shè)置一個(gè)全局變量result來(lái)存儲(chǔ)每次運(yùn)算后的結(jié)果，當(dāng)下次輸入運(yùn)算符號(hào)時(shí)，判斷firstValue和result，再?zèng)Q定用哪個(gè)值計(jì)算。當(dāng)點(diǎn)擊C按鈕時(shí)，所有值清空，返回初始狀態(tài)。

var input = document.getElementById("display");
var btnCollection = document.getElementsByClassName("btn");
var type;
var firstValue = 0;
var bool = false;
 
   for (var i = 0; i < btnCollection.length; i++) {
   // 獲取到每個(gè)按鍵并添加點(diǎn)擊事件。點(diǎn)擊后會(huì)觸發(fā)function中代碼執(zhí)行。
            btnCollection[i].onclick = function () {
                if(bool){
                    input.value = "0";
                    firstValue = 0;
                    type = undefined;
                    bool = false;
                }
 
                // input.value = this.innerHTML;      //顯示點(diǎn)擊的數(shù)字在文本框內(nèi)
 
                if (!isNaN(Number(this.innerHTML))) {
                    input.value = Number(input.value + this.innerHTML).toString();
                } else if (this.innerHTML !== "C" && this.innerHTML !== "=") {
                    firstValue = Number(input.value);
                    type = this.innerHTML;
                    input.value = 0;
                } else if (this.innerHTML === "C") {
                    firstValue = 0;
                    type = undefined;
                    input.value = "0";
                } else {
                    switch (type) {
                        case "+":
                            input.value = (Number(input.value) + firstValue).toString();
                            break;
                        case "-":
                            input.value = (firstValue - Number(input.value)).toString();
                            break;
                        case "*":
                            input.value = (Number(input.value) * firstValue).toString();
                            break;
                        case "/":
                            input.value = (firstValue / Number(input.value)).toString();
                            break;
                    }
                    bool = true;
                }
            }
        }

到此，相信大家對(duì)“原生JS怎么實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！