js實現一個計算器
阿新 • • 發佈：2021-06-16
原始碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算器</title>
</head>
<body>
<div class="calDiv">
<h2 >計算器</h2>
<form name="calForm">
<table >
<tr>
<td>num1:</td>
<td><input type="text" name="num1"></td>
</tr>
<tr>
<td>num2:</td>
<td><input type="text" name="num2"></td>
</tr>
<tr>
<td colspan="2">
<button type="button">+</button>
<button type="button">-</button>
<button type="button">x</button>
<button type="button">➗</button>
</td>
</tr>
<tr>
<td>結果:</td>
<td>
<input type="text" name="result" disabled/>
</td>
</tr>
</table>
</form>
</div>
<script>
/**
* 根據標籤名獲得該標籤的所有元素物件，返回一個物件陣列
*/
let btnArr = document.getElementsByTagName("button");
/**
* 迴圈為每個按鈕註冊單擊事件
* innerHTNL:用於獲取或設定標籤體的值
* trim():擷取字串兩端的空格
*/
for (let btn of btnArr) {
btn.addEventListener('click', function () {
let fuHao = this.innerHTML.trim();
cla(fuHao);
})
}
function cla(fuHao) {
//從介面獲取的資料都是字串
//獲得num1的值
//獲得name屬性值為num1的input物件
let num1Obj = document.calForm.num1;
//獲得num1中的值
let num1 = num1Obj.value;
//將num1轉換為小數
//num1=parseInt(num1);
num1 = parseFloat(num1);
//獲得num2的值
let num2 = parseFloat(document.calForm.num2.value);
//用於統計計算結果的變數
let result = '';
switch (fuHao) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case 'x':
result = num1 * num2;
break;
case '➗':
if (num2 == 0) {
alert("除數不能為零！");
return;//返回直接退出函式的執行
}
result = num1 / num2;
break;
}
//將計算的結果賦給result輸入框
document.calForm.result.value=result;
}
</script>
</body>
</html>