使用event.target实现简单的网页版计算器

一次偶然的机会使用了手机上自带的计算器，对手机上的计算器感兴趣，想用已学的知识在网页上实现，一直想不出怎样用简单的方式去获取按键值的思绪，偶然间在其他练习上使用了event.target，便开始研究event.target的使用，最后发现使用event.target.value就能完成这功能，最后用简单的代码通过按键的点击实现简单的四则运算计算器。


虽然将我想要的计算器实现了，但其中还有许多地方需要改善，我会继续完善它的……
以下是一些关键的代码，完整的代码请点击这里

html代码

    <div class="cal_box">
        <table id="cal_box" >
            <tr>
                <td colspan="4">            
                    <textarea id="display"disabled="disabled" placeholder="calculator by lemon156"></textarea></td>
            </tr>

            <tr>
                <td><input type="button" value="AC" class="cl"></td>
                <td><input type="button" value="/" class="sym"></td>
                <td><input type="button" value="*" class="sym"></td>
                <td><input type="button" value="-" class="sym"></td>
            </tr>

            <tr>
                <td><input type="button" value="7" class="btn"></td>
                <td><input type="button" value="8" class="btn"></td>
                <td><input type="button" value="9" class="btn"></td>
                <td rowspan="2"><input type="button" value="+" class="sym" style="height:120px"></td>
            </tr>

            <tr>
                <td><input type="button" value="4" class="btn"></td>
                <td><input type="button" value="5" class="btn"></td>
                <td><input type="button" value="6" class="btn"></td>
            </tr>

            <tr>
                <td><input type="button" value="1" class="btn"></td>
                <td><input type="button" value="2" class="btn"></td>
                <td><input type="button" value="3" class="btn"></td>
                <td rowspan="2"><input type="button" value="=" class="eql" style="height:120px"></td>
            </tr>

            <tr>
                <td colspan="2"><input type="button" value="0" class="btn" style="width:140px"></td>
                <td><input type="button" value="." class="btn"></td>
            </tr>
        </table>
        <span>----lemon156----</span>
    </div>

css代码

*{
    margin: 0;
    padding: 0;
}
.cal_box{
    width: 340px;
    height: 550px;
    margin: 100px auto;
    border: 1px solid #888;
    box-shadow: 0 0 40px #ccc;
}
.cal_box textarea{
    width: 310px;
    height: 120px;
    margin: 10px;
    padding-top: 15px;
    text-indent: 1em;
    font-size: 24px;
    overflow: hidden;
    resize:none;
}
.cal_box input{
    width: 60px;
    height: 50px;
    margin: 10px;
    font-size: 18px;

}
.cal_box span{
    text-align: center;
    width: 200px;
    display: block;
    margin: 0 auto;
    font-size: 18px;
    color: #ccc;
}

js代码

var cal_box=document.getElementById('cal_box'),
    display=document.getElementById('display'),

    cal_result="",//存放运算结果
    list1="",   //存放输入的第一个值
    list2="",   //存放第二个值
    num1=0,     //第一个值
    num2=0,     //第二个值
    sym="",     //运算符号
    eql="",     //等于号           
    flag=false;

document.addEventListener('click',function(e){
    var target=e.target;
    //输入第一个值
    if (!flag) {
        if(target.className=='btn') {           
            list1+=target.value;
            num1=parseFloat(list1);
            display.innerHTML=num1;
        }
    };
    //输入运算符号
    if(target.className=='sym') {
        flag=true;
        sym=target.value;
        display.innerHTML=num1+sym;                     
    };

    //输入第二个值
    if(flag){   //如果按了运算符号的键就输入第二个数
        if (target.className=='btn') {

            list2+=target.value;
            num2=parseFloat(list2);
            display.innerHTML=num1+sym+num2;

        };
    }
    //进行计算并输出结果
    if (target.className=='eql') {  //判断是否是按了等于键
        eql=target.value;
        flag=false;
        switch(sym){
            case '/': cal_result=parseFloat(num1/num2);break;
            case '*': cal_result=parseFloat(num1*num2);break;
            case '-': cal_result=parseFloat(num1-num2);break;
            case '+': cal_result=parseFloat(num1+num2);break;
        }
        display.innerHTML=num1+sym+num2+'\n\n\t'+eql+cal_result;//显示输出结果
        list1="";//每次运算完，再次输入时自动清屏，
        list2="";//这两个一定要清空，否则需要按清空键才能再次输入
    };
    //清屏
    if (target.className=='cl') {
        display.innerHTML="";   //将显示屏清空
        flag=false;     
        list1="";   //输入按键但没有进行运算，按清屏键后不保留之前输入的值
        list2="";

    };

})