雖然經(jīng)常會聽到一些不推薦使用eval()的聲音肮之， 但不得不承認eval()的功能十分強大六水，下面介紹一個我最近用eval()函數(shù)實現(xiàn)一個簡單計算器的例子竖共。
0.樣式預(yù)覽
html+css部分
1.思路介紹
先在html中結(jié)合css樣式畫出一個計算器灯帮，然后給每個按鈕添加onclick事件樊诺，計算由eval()實現(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){//點擊數(shù)字布朦，小數(shù)點，除等號外的運算符時...
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()的方法重新實現(xiàn)計算部分。
