雖然經(jīng)常會(huì)聽(tīng)到一些不推薦使用eval()的聲音， 但不得不承認(rèn)eval()的功能十分強(qiáng)大，下面介紹一個(gè)我最近用eval()函數(shù)實(shí)現(xiàn)一個(gè)簡(jiǎn)單計(jì)算器的例子。
0.樣式預(yù)覽
html+css部分
1.思路介紹
先在html中結(jié)合css樣式畫(huà)出一個(gè)計(jì)算器，然后給每個(gè)按鈕添加onclick事件，計(jì)算由eval()實(shí)現(xiàn)。
代碼如下：
①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){//點(diǎn)擊數(shù)字，小數(shù)點(diǎn)，除等號(hào)外的運(yùn)算符時(shí)...
messageBox = document.getElementById('message');
messageBox.value = messageBox.value + val;
}
function clickBack(){//點(diǎn)擊退格時(shí)...
messageBox = document.getElementById('message');
messageBox.value = messageBox.value.slice(0, -1);
}
function clickClear(){//點(diǎn)擊清除時(shí)...
messageBox = document.getElementById('message');
messageBox.value = '';
}
function clickEqual(){//點(diǎn)擊等號(hào)時(shí)...
try{
messageBox = document.getElementById('message');
messageBox.value = eval(messageBox.value);
if(messageBox.value == "undefined"){
alert("輸入不能為空！")
clickClear();
}
}
catch(error){
alert("請(qǐng)注意輸入格式！");
clickClear();
}
}
真正計(jì)算的部分只有eval()所在行，這里處理了兩個(gè)小bug，實(shí)際上還有很多bug...
之后會(huì)嘗試使用不采用eval()的方法重新實(shí)現(xiàn)計(jì)算部分。
