小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

实现了两个数的加、减、乘、除、求余运算,如果你是多个数运算的话，请你先计算两个数，接着与下面的数计算。

计算器的逻辑操作

上片文章讲了计算器的样式，这篇文章来讲一下它的逻辑操作。

<script type="text/javascript">
    function $(x){
            return document.querySelector(x);
    }
    function $1(y){
            return document.querySelectorAll(y);
    }
    //点击x 计算器关闭
    var data_cha=$('.data_cha');
    var box = $('.box');
    data_cha.onclick=function(){
            box.style.display='none';
    }
    //点击 显示 背景效果 及建立交互
    var bg=$1('td');
    var length=bg.length;
    var input=$('input')
    for(var i=0;i<length;i++){
            bg[i].index=i;
            bg[i].onmousedown=function(){
                    if ((this.index)%4==3||(this.index)==length-1 ){
                            bg[this.index].style.backgroundColor='gray';
                    }else if (this.index==1||this.index==2||this.index==0) {
                            bg[this.index].style.backgroundColor='gray';		
                    }else{bg[this.index].style.backgroundColor='gray';
                            input.value=input.value+''+bg[this.index].innerHTML;
                            bg[0].innerHTML="C";
                            //正负 点击一下为负，再次点击为正	
                            var n=0;

                            bg[1].onclick=function(){
                                    n++;
                                    var kong='';
                                    if (n%2==1) {
                                            return input.value="-"+input.value;
                                    }else{
                                            for(i=1;i<input.value.length;i++){
                                                    kong+=input.value[i];
                                            }
                                            return input.value=kong;
                                    }
                            }
                    }	
            }
            bg[i].onmouseup=function(){
                    bg[this.index].style.backgroundColor='';	
            }
    }
    //点击C的时候变AC 并使文本框输入为空
    bg[0].onclick=function(){
            bg[0].innerHTML="AC";
            return input.value='';
    }
    bg[16].onclick=function(){
            if (input.value[0]==0) {
                    return input.value=input.value[0];
            }
    } 
    //输入值
    function shuru(){
             var num=Number(input.value);
             return num;
    }
    //加减乘除定义 并取第一次输入值
    var yunsuanfu=$1('.yunsuanfu');
    var x,y,opt;
    yunsuanfu[0].onclick=function(){
                    opt="%";
                    x =shuru();
                    input.value='';
            }
    yunsuanfu[1].onclick=function(){
                    opt="&divide;";
                    x =shuru();
                    input.value='';
            }
    yunsuanfu[2].onclick=function(){
                    opt="&times;";
                    x =shuru();
                    input.value='';
            }
    yunsuanfu[3].onclick=function(){
                    opt="-";
                    x =shuru();
                    input.value='';
            }
    yunsuanfu[4].onclick=function(){
                    opt="+";
                    x =shuru();
                    input.value='';
            }
    bg[18].onclick=function(){
                    y=shuru();//取第二次输入值
            if (opt=="%") {input.value=x%y;}
            else if(opt=="-"){input.value=x-y;}
            else if(opt=="+"){input.value=x+y;}
            else if(opt=="&times;"){input.value=x*y;}
            else if(opt=="&divide;"){input.value=x/y;}
    }

</script>

总结

实现了计算器的加减乘除。