计算器的实现

Posted 2020-08-22 hopeelephant

　　今天来讲一下计算器的实现，效果得是怎样的呢，拿出你的手机的计算器看一下就知道了，注意的是我们运算了两个数再点击等号会出结果，点击运算符也是会出结果的，。这是第一点需要注意的，第二点需要注意的是出了结果出来之后再点击数字会覆盖结果，根据你想要的效果，我们一步步循环渐进的来看看效果。

　　首先我们来声明一个变量；var num1="";这个变量是用来存放第一个值得。

　　

$(".number input").click(function(){
            var num =$(this).val();
            
            if(sign==""){
                if(equa!==""){
                    num1="";
                    num2="";
                    equa="";
                }
                num1 = num1+num;
                $(".search input").val(num1);

            }else{
                num2 = num2 + num;
                $(".search input").val(num1+sign+num2);

            }
})

　　接着我们来看看这串代码，暂时不看代码中的第二个if片段，。此时我们再来解读，if没有运算符号的话点击数字的话就是存的第一个数字，否则存的就是第二个数字，第一个数字就是num1 = num1+num;在输入框中显示的是$(".search input").val(num1);第二个数字就是num2 = num2 + num;输入框中显示的是$(".search input").val(num1+sign+num2);

　　点击了数字之后，我们再来点击符号；

        $(".sign input").click(function(){
            if(num2!==""){
                switch(sign){
                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;
            }
            $(".search input").val(result);
            num1=result;
            num2="";
        }

             sign = $(this).val();
            $(".search input").val(num1+sign);
        })

　　首先还是先不看if语句，这样我们再点击数字之后，再点击符号，最后得到的就是$(".search input").val(num1+sign);在此之前我们需要将符号声明变量，赋值为空字符串，。

　　if里面的语句是指第二个数存在的时候，我们再点运算符会直接显示出结果，最后写上num1=result;的目的是将获得的结果当成num1,这个我们就可以在结果上直接加上数字了。num2="";另外num2一定得为空，要不我们再次输入数字的时候就会直接接在上一层的num2后面来写。

　　再来点击等号；看看代码

$(".equa").click(function(){
             equa = $(this).val();
            switch(sign){
                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;
            }
            $(".search input").val(result);
            num1 = result;
            num2 = "";
            sign="";
        })

点击等号的时候出来结果，最后还是

num1 = result;
num2 = "";

其目的还是和上一层的效果是一样的。

另外符号的为空的目的是当我们在出了结果之后再点击数字让新的数字覆盖结果，否则的话新点击的数字就会接在上一层的运算符后面的数字继续下去。

$(".delete").click(function(){
            $(".search input").val("");
            num1="";
            num2="";
            sign="";
        })

　　这是清楚的代码，很简单，点击之后，让搜索框中的东西变成空字符串，并且清空第一个数，第二个数，和运算符清除掉。

　　

$(".number input").click(function(){
            var num =$(this).val();
            
            if(sign==""){
                if(equa!==""){
                    num1="";
                    num2="";
                    equa="";
                }
                num1 = num1+num;
                $(".search input").val(num1);

            }else{
                num2 = num2 + num;
                $(".search input").val(num1+sign+num2);

            }
})

　　在来看看这段代码里面的第二个if语句，它的意思是当运算符不存在的时候，此时如果等号点击了，那么

　　num1="";
　　num2="";
　　equa="";

　　这三者为空，为什么了，num1为空事项继续能够输入新的num1，num2为空，是想能够输入新的num2,。等号一定的为空，要不就会一直让num1为空，那么每点击一次数字num1都会为空，那么数字就不能以字符串的形式连接起来了。

　　最后再来看看

　　我一共申明了多少在后面代码中需要用到的全局变量

var num1="";// 给第一次点击的数字赋一个空值
        var sign="";//给加减乘除赋一个空值
         var num2="";//给第二个值赋一个空值
         var result; //给结果声明
         var equa="";

　　好了，就这样，一个简单的计算器就这样实现了。

终于登上华山之顶。