虽然经常会听到一些不推荐使用eval()的声音， 但不得不承认eval()的功能十分强大，下面介绍一个我最近用eval()函数实现一个简单计算器的例子。
0.样式预览
html+css部分
1.思路介绍
先在html中结合css样式画出一个计算器，然后给每个按钮添加onclick事件，计算由eval()实现。
代码如下：
①HTML部分
<body>
<div id="calcFrame">
<div id="display">
<input type="text" id="message"/>
</div>
<div id="buttons">
<ul>
<li>
<ul>
<li><input type="button" value="退格" id="tg" onclick="clickBack()"/></li>
<li><input type="button" value="清除" id="qc" onclick="clickClear()"/></li>
</ul>
</li>
<li>
<ul>
<li><input type="button" value="7" id="b7" onclick="clickButton(7)"/></li>
<li><input type="button" value="8" id="b8" onclick="clickButton(8)"/></li>
<li><input type="button" value="9" id="b9" onclick="clickButton(9)"/></li>
<li><input type="button" value="/" id="divide" onclick="clickButton('/')"/></li>
</ul>
</li>
<li>
<ul>
<li><input type="button" value="4" id="b4" onclick="clickButton(4)"/></li>
<li><input type="button" value="5" id="b5" onclick="clickButton(5)"/></li>
<li><input type="button" value="6" id="b6" onclick="clickButton(6)"/></li>
<li><input type="button" value="*" id="multiply" onclick="clickButton('*')"/></li>
</ul>
</li>
<li>
<ul>
<li><input type="button" value="1" id="b1" onclick="clickButton(1)"/></li>
<li><input type="button" value="2" id="b2" onclick="clickButton(2)"/></li>
<li><input type="button" value="3" id="b3" onclick="clickButton(3)"/></li>
<li><input type="button" value="-" id="minus" onclick="clickButton('-')"/></li>
</ul>
</li>
<li>
<ul>
<li><input type="button" value="0" id="b0" onclick="clickButton('0')"/></li>
<li><input type="button" value="." id="point" onclick="clickButton('.')"/></li>
<li><input type="button" value="=" id="equal" onclick="clickEqual()"/></li>
<li><input type="button" value="+" id="add" onclick="clickButton('+')"/></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
②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()的方法重新实现计算部分。
网友评论