JQ实现一个简易的计算器

网页计算器的实现

• 首先理清一下思路:界面部分是由HTML+css实现的，而最关键的计算功能就是用JavaScript来实现的，木木在这里用的JQuery哟。
• 显示屏用了canvas画布，这个无所谓，用一个div想必也是可以的
• 关于按键部分，我用了一排5个的宽高相似的div来实现，通过float的方式，让他们排列，当然用定位比较好哦
• 木木只写了加减乘除和pi 清空 功能，其他的（思路一样的,没必要重复了，能计算就实现我想要的了）

jQ部分的思路

• 既然我们想通过鼠标点击相应的div，来实现算法，那么我们就要注册鼠标点击事件，用$(this)找到我们所点击的div，并将相应的数字或符号输出，（数字显示到屏幕中）。
• 下面我们来考虑加数与被加数的问题，当我录入第一个数字是连续录入，当我录入一个符号，证明我的第一个数字已经录入完毕，那么我们就可以将第一个数字通过变量储存起来，并把刚刚的符号，存储在另一个变量中。
• 清空录入数字的变量，并开始录入第二个数字。那么怎么判断第二个数字录入完毕呢？哈哈！是不是当按到=号时，就代表第二个数字也完成了，那么我们叫计算器判断录入的符号是+ - x 或 /，让第一个数计算第二个数，并把计算结果显示到页面中。

效果呈现

核心jQ代码

$(function() {
    var fristnumber = ""; //储存当前数字
    var operator = "" //储存运算符
    var secondnumber = "" //第二个数字
    var calculate = false;
    $(".box").click(function() {
        // var a = $(".clear").text();
        // console.log(a);
        var canvas = $(".canvas");
        //console.log($(this).text());
        var a = $(this).text();
        //$(".canvas").html(a);
        switch (a) {
            case "0":
            case "1":
            case "2":
            case "3":
            case "4":
            case "5":
            case "6":
            case "7":
            case "8":
            case "9":
                if (calculate == true) {
                    fristnumber = "";
                    calculate = false;
                }
                //数字储存
                //console.log(a);
                fristnumber += a;
                //console.log(fristnumber);
                canvas.html(fristnumber);
                break;
            case "+":
            case "-":
            case "x":
            case "/":
            case "^":
                //储存运算符
                operator += a;
                secondnumber = fristnumber;
                fristnumber = "";
                break;
            case "π":
                operator = "x";
                secondnumber = fristnumber;
                fristnumber = "3.1415926";
                break;
            case "清除":
                secondnumber = "";
                fristnumber = "";
                operator = "";
                canvas.html(0);
                break;
            case "=":
                var number1 = 0,
                    number2 = 0,
                    result = 0;
                switch (operator) {
                    case "+":
                        number1 = parseFloat(fristnumber);
                        number2 = parseFloat(secondnumber);
                        result = number2 + number1;
                        canvas.text(result);
                        break;
                    case "-":
                        number1 = parseFloat(fristnumber);
                        number2 = parseFloat(secondnumber);
                        result = number2 - number1;
                        canvas.text(result);
                        break;
                    case "x":
                        number1 = parseFloat(fristnumber);
                        number2 = parseFloat(secondnumber);
                        result = number2 * number1;
                        canvas.text(result);
                        break;
                    case "/":
                        number1 = parseFloat(fristnumber);
                        number2 = parseFloat(secondnumber);
                        result = number2 / number1;
                        canvas.text(result);
                        break;
                    case "^":
                        number1 = parseFloat(fristnumber);
                        number2 = parseFloat(secondnumber);
                        for (var i = 0; i < number1; i++) {
                            result *= number2;
                        }
                        canvas.text(result);
                        break;
                }
        }
    });
});