用html实现公式计算,用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()的方法重新实现计算部分。