JS实现简单的计算器效果

JS实现简单的计算器效果
完成后效果如下，可以进行简单的计算和连续计算

先讲下思路，第一步肯定是要把HTML和CSS给做好，直接上代码

    body {
        font-size:12px;
        font-family:Arial, Georgia, "Times New Roman", Times, serif;
        color:#555;
        text-align:center;
        background-color:#e2e2e2;
    }
    h6{
        margin:0;
        font-size:12px;
    }
    #calculator {
        width:240px;
        height:auto;
        overflow:hidden;
        margin:10px auto;
        border:#fff 1px solid;
        padding-bottom:10px;
        background-color:#f2f2f2;
    }
    #calculator div {
        clear:both;
    }
    #calculator ul{
        padding:0;
        margin:5px 14px;
        border:#fff 1px solid;
        height:auto;
        overflow:hidden
    }
    #calculator li{
        list-style:none;
        float:left;
        width:32px;
        height:32px;
        margin:5px;
        display:inline;
        line-height:32px;
        font-size:14px;
        background-color:#eaeaea;
    }
    #calculator li.tool{
        background-color:#e2e2e2;
    }
    #calculator li:hover{
        background-color:#f9f9f9;
        cursor:pointer;
    }
    #calculator li:active{
        background-color:#fc0;
        cursor:pointer;
    }
    #calculator li.tool:active{
        background-color:#d8e8ff;
        cursor:pointer;
    }
    #calcu-head {
        text-align:left;
        padding:10px 15px 5px;
    }
    span.imyeah {
        float:right;
        color:#ccc;
    }
    span.imyeah a{
        color:#ccc;
    }
    .screen{
        width:200px;
        height:24px;
        line-height:24px;
        padding:4px;
        border:#e6e6e6 1px solid;
        border-bottom:#f2f2f2 1px solid;
        border-right:#f2f2f2 1px solid;
        margin:10px auto;
        direction:ltr;
        text-align:right;
        font-size:16px;
        color:#999;
    }
    #calcu-foot{
        text-align:left;
        padding:10px 15px 5px;
        height:auto;
        overflow:hidden;
    }
    span#note{
        float:left;
        width:210px;
        height:auto;
        overflow:hidden;
        color:red;
    }
    span.welcome{
        clear:both;
        color:#999;
    }
    span.welcome a{
        float:right;
        color:#999;
    }


    <div id="calculator">
            <div id="calcu-head"><h6>简单的计算器</h6></div>
            <div id="calcu-screen">
                <input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" />
            </div>
            <div id="btn">
                <ul>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li class="tool">←</li>
                    <li class="tool">C</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li class="tool">×</li>
                    <li class="tool">÷</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li class="tool">+</li>
                    <li class="tool">-</li>
                    <li>0</li>
                    <li>00</li>
                    <li>.</li>
                    <li class="tool">%</li>
                    <li class="tool">=</li>
                </ul>
            </div>
        </div>

那么接下来开始正式的工作了， 先写一下每个按钮的点击事件，设置变量去获取运算符和它左右两边的数值，
并把点击的按钮里的信息放到显示框内
(function(){
for(var i = 0;i<oLi.length;i++)
{
oLi[i].index = i;
oLi[i].onclick = function(){
show += oLi[this.index].innerHTML;
if(!isNaN(show))
{
LeftNum = show;
}
else
{
if(oLi[this.index].className==‘tool’)
{
Symbol[0] = oLi[this.index].innerHTML;
}
else{
RightNum += oLi[this.index].innerHTML;
}
}
oInp.value = show;
}

    }
})()
这里函数表达式写好直接让它自执行 
接下来就是运算了，上面已经把运算符和它左右两边的数都保存好了，那就可以直接用一个switch来判断这个运算的类型，然后进行操作了，代码也是超级简单  具体是给表示等号的标签设置点击事件，然后判断类型，输出结果
 oLi[19].onclick = function(){
    switch(Symbol[0]){
        case "+":result = Number(LeftNum)+Number(RightNum);break;
        case "-":result = Number(LeftNum)-Number(RightNum);break;
        case "×":result = Number(LeftNum)*Number(RightNum);break;
        case "÷":result = Number(LeftNum)/Number(RightNum);break;
        case "%":result = Number(LeftNum)%Number(RightNum);break;
    }
    oInp.value = result;}
    这样基本的计算就做好了，但是只能进行一次，因为保存数据的变量此时都已使用了，要想进行连续运算第二次，只需要把第一次的结果当作第二次刚开始输入的数据就好了
     //连续运算的设置
    show = result;
    LeftNum = result;
    RightNum = "";
    Symbol[0] = "";
    将这几句放到等号的点击事件里面就OK了