JavaScript 實現(xiàn) iOS 下的計算器

shengguo 發(fā)布于2019-08-02 15:28 / 3129人閱讀

摘要：最后一次更新于效果演示圖計算器該項目可在瀏覽器頁面上實現(xiàn)計算器。需要實現(xiàn)的功能是每當用戶點擊按鈕，文本框要實時顯示被更新的表達式。如果當前表達式無法被計算，被異常處理捕獲并在文本框顯示。

最后一次更新于2019/07/08

效果演示圖

iOS 計算器

該項目可在瀏覽器頁面上實現(xiàn) iOS 計算器。

該項目可被分成三部分: HTML，CSS 和 JavaScript。具體實現(xiàn)方法會在下方詳細展開。

HTML

首先，我們需要創(chuàng)建一個 HTML 文件來定義 iOS 計算器的布局。它只有一個文本框。第一行的按鈕均為特殊操作符按鈕 (被標記為 btn orange_btn)。除此之外，最后一列的按鈕表示常見操作符 (被標記為 gray_btn)。剩下的按鈕均為普通數(shù)字按鈕 (被標記為 btn). 所有的按鈕被包裹在 table 標簽下。

具體代碼如下：




    
    
    
     

    JavaScript Calculator

CSS

第二個任務是渲染 iOS 的布局。比如在我們的事例中，所有按鈕的邊緣都是圓角。除此之外，gray_btn 對應的按鈕16進制的顏色表示是 #a6a6a6，orange_btn 對應的按鈕16進制的顏色表示是 #ff9705 而 btn 對應的按鈕16進制的顏色表示是 #333333。

具體代碼如下：

button,input,td,body{
    border: 0;
    margin: 0;
    padding: 0;
    outline:none; /* 移除用戶點擊時按鈕邊緣出現(xiàn)的藍框 */
}

table{
    display: block;
    position:absolute;
    width: 400px;
    height: 620px;
    top:50%;
    left:50%;
    margin-top: -310px;
    margin-left: -200px;
    border-spacing: 0px;
    background-color: black;
}

td{
    width: 100px;
    height: 100px;
    text-align:center;
}
.output_txt {
    width: 340px;
    height: 100px;
    border:0px;
    color: white;
    font-size: 70px;
    text-align: right;
    margin-left: 0px;
    background-color: black;
}
.btn{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    font-size:40px;
    color:#ffffff;
    background-color: #333333;
}

.btn_long{
    width: 180px;
    height: 80px;
    border-radius: 50px;
}

.orange_btn{
    background-color: #ff9705;
}

.gray_btn{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    font-size:40px;
    color: black;
    background-color: #a6a6a6;
}

JavaScript

我提供了兩種用 JavaScript 實現(xiàn)的計算方法(只是形式上不同，本質(zhì)還是一致的)。在 JavaScript 中，它有現(xiàn)成的內(nèi)置函數(shù) eval() 用于計算表達式的結(jié)果，這樣就不需要我們自己去寫相對應的算法啦。需要實現(xiàn)的功能是每當用戶點擊按鈕，文本框要實時顯示被更新的表達式。如果表達式有錯誤(不是算術(shù)表達式)，那么就需要立刻在文本框提示用戶當前表達式是"Error"。

簡單的 Javascript 寫法的代碼如下：

/**
 * 最基本的 Javascript 寫法。
 * @author Hephaest
 * @version 2018/10/20
 */

/**
 * 以防輸入錯誤。
 * @param text 用戶輸入的文本。
 * @returns {*} 檢查結(jié)果。
 */
function handle_undefined(text){
    var check = (parseInt(text)) * 0.01;
    text = toString(check)!== "object undefined"? check : "Error";
    return text;
}

/**
 * 以防用戶輸入的表達式會引起異常。
 * @param text 即將被計算的表達式文本。
 * @returns {any} 計算結(jié)果或"Error"。
 */
function calculator(text){
    var output;
    try{
        // 如果當前表達式能被 eval() 計算，說明表達式無誤，否則進入異常處理。
        output = eval(text);
    } catch(e){
        output= "Error";
    }
    return output;
}

/**
 * 遍歷所有的按鈕并實時更新文本框的表達式。
 */
window.onload = function () {
    let button = document.getElementsByClassName("btn");
    let expression = document.getElementsByClassName("output_txt")[0];
    let special_op = document.getElementsByClassName("gray_btn");
    let record = false;
    for (let i = 0; i < special_op.length; i++) {
        special_op[i].onclick = function () {
            if (this.value === "AC") expression.value = "0";
            else if (this.value === "+/-") expression.value = parseInt(expression.value)* (-1);
            else expression.value = handle_undefined(expression.value);
            }
    }

    for (let i = 0; i < button.length; i++) {
        button[i].onclick = function () {
            if (this.value === "."){
                if (expression.value.indexOf(".") === -1) expression.value += this.value;
            } else if (this.value === "÷" || this.value === "×"){
                if(this.value === "÷") expression.value += "/";
                else expression.value += "*";
            } else if(this.value === "="){
                expression.value = calculator(expression.value);
                record = true;
            } else {
                if(expression.value === "0" || record === true){
                    expression.value = this.value;
                    record = false;
                } else{
                    expression.value += this.value;
                }
            }
        }
    }
}

JQuery 寫法的代碼如下：

/**
 * 只使用 JQuery 的寫法。
 * @author Hephaest
 * @version 2018/10/20
 */

/**
 * 確認將被計算或顯示的表達式是否有誤。
 * @type {{handle_undefined: (function(*=): *), calculator: (function(*=): any)}}
 */
$.func={
    // 如果用戶輸入有誤，在文本框顯示"Error"。
    handle_undefined: function (text) {
        var check = (parseInt(text)) * 0.01;
        text = (toString(check)!= "object undefined")? check : "Error";
        return text;
    },

    // 如果當前表達式無法被計算，被異常處理捕獲并在文本框顯示"Error"。
    calculator: function (text) {
        var output;
        try{
            output = eval(text);
        } catch(e){
            output= "Error";
        }
        return output;
    }

}

/**
 * 捕獲用戶輸入的字符并實時更新文本框里顯示的表達式。
 */
$(document).ready(function () {
    var button = $(".btn");
    var expression = $(".output_txt")[0];
    var special_op = $(".gray_btn");
    var record = false;

    // 判斷是否是特殊操作符。
    special_op.bind("click",function () {
        if (this.value === "AC") {
            expression.value = "0";
        }
        else if (this.value === "+/-") {
            expression.value = parseInt(expression.value)* (-1);
        }
        else {
            expression.value = $.func.handle_undefined(expression.value);

        }
    })

    // 連接操作符和數(shù)字形成表達式。
    button.bind("click", function () {
        if (this.value === "."){
            if (expression.value.indexOf(".") === -1) expression.value += this.value;
        } else if (this.value === "÷" || this.value === "×"){
            if(this.value === "÷") expression.value += "/";
            else expression.value += "*";
        } else if(this.value === "="){
            expression.value = $.func.calculator(expression.value);
            record=true;
        } else {
            if(expression.value === "0" || record === true){
                expression.value = this.value;
                record = false;
            } else{
                expression.value += this.value;
            }
        }
    })

})

源碼

如果我的文章可以幫到您，勞煩您點進源碼點個 ★ Star 哦！
https://github.com/Hephaest/i...