用js中的eval()函数实现一个简单的计算器

虽然经常会听到一些不推荐使用eval()的声音, 但不得不承认eval()的功能十分强大,下面介绍一个我最近用eval()函数实现一个简单计算器的例子。

0.样式预览

html+css部分

1.思路介绍

先在html中结合css样式画出一个计算器,然后给每个按钮添加onclick事件,计算由eval()实现。

代码如下:

①HTML部分


    

②CSS部分

#calcFrame{
    position: relative;
    padding: 0;
    margin: 10px auto;
    width: 400px;
    height: 300px;
    overflow: hidden;
}

#display{
    position: absolute;
    margin: 0;
    padding: 0;
    left: 5px;
    right: 5px;
    top: 5px;
    height: 100px;
    overflow: hidden;
    border: 2px solid black;
}

#message{
    width: 400px;
    height: 100px;
    font-size: 35px;
    border: 0;
}

#buttons{
    position: absolute;
    left: 5px;
    right: 5px;
    top: 110px;
    border: 1px solid #315484;
}

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

li{
    margin: 0;
    padding: 0;
    float: left;
}

input{
    margin-left: 1.5px;
    margin-top: 1.5px;
    margin-bottom: 1.5px;
    width: 95px;
    font-family: SimHei;
    font-size: 25px;
    
}


#add, #minus, #multiply, #divide, #equal{
    color: white;
    background-color: #6681ac;
}

#point, #b0, #b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9{
    background-color: #afafaf;
}

#tg, #qc{
    color: white;
    width: 191.5px;
    background-color: #a4472d;
}

③JS部分

function clickButton(val){//点击数字,小数点,除等号外的运算符时...
    messageBox = document.getElementById('message');
    messageBox.value = messageBox.value + val;
}

function clickBack(){//点击退格时...
    messageBox = document.getElementById('message');
    messageBox.value = messageBox.value.slice(0, -1);
}

function clickClear(){//点击清除时...
    messageBox = document.getElementById('message');
    messageBox.value = '';
}

function clickEqual(){//点击等号时...
    try{
        messageBox = document.getElementById('message');
        messageBox.value = eval(messageBox.value);
        if(messageBox.value == "undefined"){
            alert("输入不能为空!")
            clickClear();
        }
    }
    catch(error){
        alert("请注意输入格式!");
        clickClear();
    }
}

真正计算的部分只有eval()所在行,这里处理了两个小bug,实际上还有很多bug...
之后会尝试使用不采用eval()的方法重新实现计算部分。

你可能感兴趣的:(用js中的eval()函数实现一个简单的计算器)