運用jQuery製作一個簡單的計算器

第一次寫博文，好激動。如果有什麼錯誤的地方歡迎指出來，本人脾氣好，並且虛心好學，歡迎指導。

最近學習了jquery，那麼能獨立寫出一個計算器來，我相信對你的基礎會有很大的幫助。

那麼，廢話少說，開始了。

第一步：

　　利用div+css實現一個簡單的計算器頁面，這裡比較簡單，我就不多說了。

先看下效果圖（個人感覺還闊以）。

<!--這是html部分。-->
<div id="content">
        <h3 class="title-box">計算器</h3>
        <div class="jsq">
            <div class="text-box">0</div>
            <div class="num">
                <a href="javascript:;" class="num-box num-num">7</a>
                <a href="javascript:;" class="num-box num-num">8</a>
                <a href="javascript:;" class="num-box num-num">9</a>
                <a href="javascript:;" class="num-box num-char">/</a>
                <a href="javascript:;" class="num-box num-num">4</a>
                <a href="javascript:;" class="num-box num-num">5</a>
                <a href="javascript:;" class="num-box num-num">6</a>
                <a href="javascript:;" class="num-box num-char">*</a>
                <a href="javascript:;" class="num-box num-num">1</a>
                <a href="javascript:;" class="num-box num-num">2</a>
                <a href="javascript:;" class="num-box num-num">3</a>
                <a href="javascript:;" class="num-box num-char">-</a>
                <a href="javascript:;" class="num-box num-num">0</a>
                <a href="javascript:;" class="num-box num-clear">清空</a>
                <a href="javascript:;" class="num-box num-char">+</a>
                <a href="javascript:;" class="num-box num-result">=</a>
            </div>
        </div>
    </div>

/*===這是css部分===*/
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
a{
    text-decoration:none;
}
#content{
    width:255px;
    height:245px;
    border:2px solid #0026FF;
    margin:100px auto;
}
.title-box{
    padding:5px 0;
    font-size:12px;
    color:#FFF;
    background:rgba(4,84,235,1);
}
.text-box{
    width:240px;
    height:30px;
    text-align:right;
    margin:10px auto;
    border:1px solid #CCC;
}
.num{
    width:200px;
    height:170px;
    margin: 0 auto;
}
.num-box{
    display:block;
    float:left;
    width:40px;
    height:30px;
    margin:5px;
    text-align:center;
    line-height:30px;
    border-radius:5px;
    border:1px solid rgba(31,55,67,1);
}

第二步：（首先我們要實現點擊數字按鈕，在文本框上顯示對應的數字。）

　　1、創建一個變數Num1，來存放第一個數字。

$(function () {//頁面載入完成
    var Num1 = "";  //存放數字1
});

　　2、點擊按鈕獲取數字，並顯示在文本框。

//給數字添加點擊事件
    $('.num-num').click(function () {
        var txt = $(this).text();
        Num1 = Num1 + txt;
        $('.text-box').text(Num1);
    });

第三步：（獲取運算符，並顯示）

　　1、創建一個變數Char，來存放運算符（+、-、*、/）。

//給運算符添加點擊事件
    $('.num-char').click(function () {
        Char = $(this).text();
        $('.text-box').text(Num1 + Char);
    });

第四步：（在文本框實現1+1的效果）這裡用1+1舉例。

　　1、創建變數Num2，用來存放第二個數字。如果沒有點擊運算符，則繼續輸入第一個數字（Num1），如果點擊運算符（Char），則結束第一個數字（Num1）的輸入，開始第二個數字（Num2）的輸入，並且顯示1+1（第一個數字（Num1）運算符（Char）第二個數字（Num2）），如果多次輸入運算符（Char），則替換當前的運算符（Char）。

    //獲取數字，並顯示數字
    var Num1 = "";  //存放數字1
    var Num2 = "";  //存放數字2
    var Char = "";  //存放運算符

    //給數字添加點擊事件
    $('.num-num').click(function () {
        var txt = $(this).text();
        if (Char == "") {//如果沒有點擊運算符，就繼續存入第一個數字。否者顯示運算符開始存入第二個數字
            if (Bbq == false) {
                Num1 = "";
                Bbq = true;
            }
            Num1 = Num1 + txt;
            $('.text-box').text(Num1);
        } else {
            Num2 = Num2 + txt;
            $('.text-box').text(Num1 + Char + Num2);
        }

    });

第五步：（點擊“=”，輸出結果）

　　1、封裝函數BeginChar()做一個判斷，不同的運算符做不同的運算

    function BeginChar() {//做一個判斷，不同的運算符做不同的運算
        switch (Char) {
            case "+":
                Result = parseFloat(Num1) + parseFloat(Num2);
                break;
            case "-":
                Result = parseFloat(Num1) - parseFloat(Num2);
                break;
            case "*":
                Result = parseFloat(Num1) * parseFloat(Num2);
                break;
            case "/":
                Result = parseFloat(Num1) / parseFloat(Num2);
                break;
        }
    }

　　2、點擊等號出結果。註意：如果Num1和Num2為空，則報錯。

（未完待續....有急事）