JavaScript 實(shí)現(xiàn) iOS 下的計(jì)算器

Forest10 發(fā)布于2019-08-30 11:19 / 2589人閱讀

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

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

效果演示圖

iOS 計(jì)算器

該項(xiàng)目可在瀏覽器頁(yè)面上實(shí)現(xiàn) iOS 計(jì)算器。

該項(xiàng)目可被分成三部分: HTML，CSS 和 JavaScript。具體實(shí)現(xiàn)方法會(huì)在下方詳細(xì)展開(kāi)。

HTML

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

具體代碼如下：




    
    
    
     

    JavaScript Calculator

CSS

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

具體代碼如下：

button,input,td,body{
    border: 0;
    margin: 0;
    padding: 0;
    outline:none; /* 移除用戶點(diǎn)擊時(shí)按鈕邊緣出現(xiàn)的藍(lá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 實(shí)現(xiàn)的計(jì)算方法(只是形式上不同，本質(zhì)還是一致的)。在 JavaScript 中，它有現(xiàn)成的內(nèi)置函數(shù) eval() 用于計(jì)算表達(dá)式的結(jié)果，這樣就不需要我們自己去寫(xiě)相對(duì)應(yīng)的算法啦。需要實(shí)現(xiàn)的功能是每當(dāng)用戶點(diǎn)擊按鈕，文本框要實(shí)時(shí)顯示被更新的表達(dá)式。如果表達(dá)式有錯(cuò)誤(不是算術(shù)表達(dá)式)，那么就需要立刻在文本框提示用戶當(dāng)前表達(dá)式是"Error"。

簡(jiǎn)單的 Javascript 寫(xiě)法的代碼如下：

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

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

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

/**
 * 遍歷所有的按鈕并實(shí)時(shí)更新文本框的表達(dá)式。
 */
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 寫(xiě)法的代碼如下：

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

/**
 * 確認(rèn)將被計(jì)算或顯示的表達(dá)式是否有誤。
 * @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;
    },

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

}

/**
 * 捕獲用戶輸入的字符并實(shí)時(shí)更新文本框里顯示的表達(dá)式。
 */
$(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ù)字形成表達(dá)式。
    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;
            }
        }
    })

})

源碼

如果我的文章可以幫到您，勞煩您點(diǎn)進(jìn)源碼點(diǎn)個(gè) ★ Star 哦！
https://github.com/Hephaest/i...

云服務(wù)器 GPU云服務(wù)器 javascript實(shí)現(xiàn) javascript實(shí)現(xiàn)動(dòng)畫(huà) javascript實(shí)現(xiàn)隊(duì)列 javascript實(shí)現(xiàn)方法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114917.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Forest10

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

flex布局示例代碼二

閱讀 1668·2019-08-30 15:44
JavaScript 實(shí)現(xiàn) iOS 下的計(jì)算器

閱讀 2590·2019-08-30 11:19
「譯」Flexbox 基本原理

閱讀 427·2019-08-30 11:06
Codepen 每周精選：值得收藏的24個(gè)頁(yè)面特效（2018-5-21）

閱讀 1590·2019-08-29 15:27
簡(jiǎn)單說(shuō) 通過(guò)JS的隱式轉(zhuǎn)換，關(guān)鍵時(shí)刻救你一命

閱讀 3103·2019-08-29 13:44
網(wǎng)站代碼優(yōu)化

閱讀 1648·2019-08-28 18:28
CSS 尺寸

閱讀 2378·2019-08-28 18:17
【Vue原理】Compile - 源碼版之 Parse 主要流程

閱讀 2035·2019-08-26 10:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript 實(shí)現(xiàn) iOS 下的計(jì)算器

相關(guān)文章