运用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为空，则报错。

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

 

转载于:https://www.cnblogs.com/lzijiangg/p/20170709jsq.html