HTML+JavaScript小練習之簡易計算器
阿新 • • 發佈：2018-12-11
計算器應該是所有圖形化程式開發學習中最適合上手的一個小專案了，之前學習Java Swing和Android的時候也是從開發計算器開始做起，這一次使用HTML和JavaScript開發一個功能簡單的web計算器吧?
首先確定計算器的功能應該包括：輸入、逐個刪除、清空所有、顯示結果四個部分。
①輸入
基本元件為
<input type="button" id="btn_7" value="7" onclick="inputExp('7')" />為其繫結一個inputExp(symbol) 函式，函式功能是將傳入的symbol值新增到表示式框中，比如按鈕“7”,入口引數就為7。
/*將按鈕對應的符號組合成表示式*/
function inputExp(symbol) {
ele = document.getElementById("expression");
ele.value += symbol;
}②逐個刪除
類似於電腦上Backspace的功能按鈕，點選則刪除表示式 最後一位字元。
<input type="button" id="btn_del" value="Del" onclick="deleteSymbol()" />使用String類中封裝的slice()函式完成backspace的功能，獲得expression框中的String型表示式的length後-1作為擷取終點，再將擷取下來的新字串賦給expression框的value即可實現刪除末位字元的功能。
/*逐個刪除*/
function deleteSymbol() {
ele = document.getElementById("expression");
var exp = ele.value;
var end = exp.length - 1;
exp = ele.value.slice(0, end);
ele.value = exp;
}③清空所有
點選清空expression框和result框
<input type="button" id="btn_=" value="=" onclick=" giveResult()" />
先後通過document.getElementById()獲取元件，再將其value賦值為空字串即可
/*清空所有內容*/
function clearAll() {
ele = document.getElementById("expression");
ele.value = "";
ele = document.getElementById("result")
ele.value = "";
}④顯示結果
點選將expression框中的表示式計算，並將結果顯示在result框中
<input type="button" id="btn_0" value="0" onclick=" inputExp('0')" />
這裡JavaScript提供了非常簡便的eval()函式，直接將expression框中的String型表示式作為eval()的入口引數即可計算出結果
/*計算出結果*/
function giveResult() {
ele = document.getElementById("expression");
resultOfExp = eval(ele.value);
ele = document.getElementById("result");
ele.value = resultOfExp;
}完整版程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算器</title>
<style type="text/css">
input {
width: 100px;
height: 60px;
font-size: 35px
}
</style>
</head>
<body>
<script type="text/javascript">
var ele; //用於獲取元件
var resultOfExp;
/*清空所有內容*/
function clearAll() {
ele = document.getElementById("expression");
ele.value = "";
ele = document.getElementById("result")
ele.value = "";
}
/*將按鈕對應的符號組合成表示式*/
function inputExp(symbol) {
ele = document.getElementById("expression");
ele.value += symbol;
}
/*計算出結果*/
function giveResult() {
ele = document.getElementById("expression");
resultOfExp = eval(ele.value);
ele = document.getElementById("result");
ele.value = resultOfExp;
}
/*逐個刪除*/
function deleteSymbol() {
ele = document.getElementById("expression");
var exp = ele.value;
var end = exp.length - 1;
exp = ele.value.slice(0, end);
ele.value = exp;
}
</script>
<table align="center" style="height: 350px; width: 270px; padding-top: 50px">
<tr>
<td colspan="4">
<input type="text" id="expression" style="height: 60px; width: 410px; font-size: 40px" />
</td>
</tr>
<tr>
<td colspan="4">
<input type="text" id="result" style="height: 60px; width: 410px; font-size: 40px" />
</td>
</tr>
<tr>
<td> <input type="button" id="btn_clear" value="C" onclick="clearAll()" /></td>
<td> <input type="button" id="btn_(" value="("onclick="inputExp('(')" /></td>
<td> <input type="button" id="btn_)" value=")" onclick="inputExp(')')" /></td>
<td> <input type="button" id="btn_/" value="/" onclick="inputExp('/')" /></td>
</tr>
<tr>
<td> <input type="button" id="btn_7" value="7" onclick="inputExp('7')" /></td>
<td> <input type="button" id="btn_8" value="8" onclick="inputExp('8')" /></td>
<td> <input type="button" id="btn_9" value="9" onclick="inputExp('9')" /></td>
<td> <input type="button" id="btn_*" value="*" onclick="inputExp('*')" /></td>
</tr>
<tr>
<td> <input type="button" id="btn_4" value="4" onclick="inputExp('4')" /></td>
<td> <input type="button" id="btn_5" value="5" onclick="inputExp('5')" /></td>
<td> <input type="button" id="btn_6" value="6" onclick="inputExp('6')" /></td>
<td> <input type="button" id="btn_-" value="-" onclick="inputExp('-')" /></td>
</tr>
<tr>
<td> <input type="button" id="btn_1" value="1" onclick="inputExp('1')" /></td>
<td> <input type="button" id="btn_2" value="2" onclick="inputExp('2')" /></td>
<td> <input type="button" id="btn_3" value="3" onclick="inputExp('3')" /></td>
<td> <input type="button" id="btn_+" value="+" onclick="inputExp('+')" /></td>
</tr>
<tr>
<td> <input type="button" id="btn_=" value="=" onclick=" giveResult()" /></td>
<td> <input type="button" id="btn_0" value="0" onclick=" inputExp('0')" /></td>
<td> <input type="button" id="btn_." value="." onclick=" inputExp('.')" /></td>
<td> <input type="button" id="btn_del" value="Del" onclick="deleteSymbol()" /></td>
</tr>
</table>
</body>
</html>
總結：計算器程式難度不高，但對於初學階段而言還是會遇到不少意想不到問題，比如我在為清空按鈕繫結事件時候onclick="clear()"死活就是出不來想要的效果，最後發現clear是JS的保留字之一，改成clearAll之後就順理運行了。所以還是不能眼高手低，自己動手開發一遍為好。