简单计算器---练手

在学js的过程中用eval方法写了一个简单的计算器，本来想模仿Google的计算器，可是发现不太会，就只把简易版实现出来了。

贴一下gayhub地址：召唤师技能——传送

还是有很多问题的，不过主要是练手为主，我不会闲的蛋疼去用这个计算器的~~~

废话不多说，我直接贴代码了。

CSS:

.calculator{
    height: 440px;
    width: 326px;
    margin: 150px auto;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 15px black;
    overflow: hidden;
}
.calculator .c_screen {
    display:block;
    padding-top:1px;
    width: 326px;
    height: 60px;
    background-color: #ddd;
    border-radius: 5px;
    text-align: center;
    margin-top:10px; 
}
.calculator .c_row{
    margin: 0 23px;
}
button {
    display: table-cell;
    cursor: pointer;
    width: 60px;
    height: 45px;
    margin: 20px 2px 0;
    border: 0px;
    border-radius: 5px;
    color: #000;
    outline: none;
    
}
button:active {
    box-shadow: 0 0 2px 2px #2c93ce;
}
.c_func_btn{
    background: #aaa;
    font-weight: bold;
}
.c_d{
    color: #fff;
    font-weight: bold;
    background-color:#4d90fe; 
}

HTML

    
    
    
    


    

        

            

        
        

            

                (
                )
                %
                AC
            
            

                7
                8
                9
                /
            
            

                4
                5
                6
                x
            
            

                1
                2
                3
                -
            
            

                0
                .
                =
                +
            
        
    

JS

window.onload = function() {
    var btn_wrap = document.getElementsByClassName('c_btn_wrapper')[0],
    // 按钮容器
    content = document.getElementsByTagName('p')[0],
    // 显示器内容
    count = 0,
    //记录显示屏上字符及数字个数
    bOneDec = false; //表示显示屏一个数字中是否已经有一个小数点的状态
    btn_wrap.onclick = function(e) {
        var target = e.target;
        if (target.nodeName.toLowerCase() === 'button') {
            var btnType = target.innerText;
            if (content.innerText == 'Math Error' && btnType != 'AC') {
                return;
            }
            if (btnType == 'AC') {
                bOneDec = false;
                content.innerText = '0';
                count = 1;
            } else if (btnType == '=') {
                var text = content.innerText;
                if (!text) {
                    return;
                } else {
                    text = text.replace(/x/g, '*');
                    var result;
                    try {
                        result = eval(text) + '';
                        if (result.search(/\./) > 0) {
                            bOneDec = true;
                            if (result.split('.')[1].length > 5) {
                                result = ( + result).toFixed(5);
                            }
                        }
                        content.innerText = result;
                        count = result.length;
                    } catch(e) {
                        content.innerText = e.message;
                        window.location.href = "https://stackoverflow.com/search?q=js+" + e.message;    //面向stackoverflow编程
                    }
                }
            } else {
                if (isNaN( + btnType) && btnType != '.') {
                    bOneDec = false;
                }
                if (btnType == '.') {
                    if (bOneDec) {
                        return;
                    }
                    bOneDec = true;
                }
                if (content.innerText == '0' && (!isNaN( + btnType) || btnType == '(' || btnType == ')')) {
                    content.innerText = '';
                }
                content.innerText += btnType;
                if (count++>=25) {
                    alert('输入太多了！');
                }
            }
        }
    }
};