<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*計算器盒子*/
.divs {
width: 500px;
height: 600px;
border: 1px solid #000000;
margin: auto;
}
/* 計算器的結果顯示區 即input.value*/
.divs > input {
width: 460px;
height: 45px;
margin-left: 18px;
margin-top: 10px;
font-size: 30px;
background-color: white;
text-align: right; /* 讓內容從最右側開始 */
}
/* 給divs下面所有的div設定,即給計算器的按鍵進行設定 */
.divs > div {
width: 100px;
height: 100px;
float: left;
border: 1px solid #000000;
margin-left: 18px;
margin-top: 25px;
font-size: 40px;
line-height: 100px;
text-align: center;
user-select: none; /*禁止選中*/
}
</style>
</head>
<body>
<div class="divs">
<input type="text" value="0" id="input1" disabled />
<!-- value設定初始顯示為0 -->
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">-</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">+</div>
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">*</div>
<div class="block">C</div>
<div class="block">0</div>
<div class="block">=</div>
<div class="block">/</div>
</div>
<script>
var blocks = document.getElementsByClassName("block");
// 獲取類名為blocks的內容 形成陣列
var input = document.getElementById("input1");
// 獲取input
var firstValue = 0,
// 用于存盤中間值的變數
bool = false;
// bool 通過判斷消除計算后input.value中的內容 從而使下次運算可以正常進行
var type;
// 定義計算型別(+ - * /)
//for 遍歷block陣列
for (var i = 0; i < blocks.length; i++) {
blocks[i].onclick = function () {
//判斷this.innerHTML是否為數字
if (!isNaN(this.innerHTML)) {
//判斷 當bool=true時進入,使其input.value重新歸0
if (bool) {
input.value = "0";
bool = false;
}
//點擊內容使其以字串的形式累加顯示到input.value中
input.value = Number(input.value +this.innerHTML).toString();
}
//當this.innerHTML不是數字時
else {
// 判斷this.innerHTML是否不等于C 或 = ;即判斷this.innerHTML是否為 = - * /
if (this.innerHTML !== "C" && this.innerHTML !== "=") {
firstValue = Number(input.value);
type = this.innerHTML;
input.value = "0";
}
// 點擊C時的屬性設定
else if (this.innerHTML === "C") {
firstValue = 0;
// 暫存區歸0
type = undefined;
// type設為未定義
input.value = "0";
// input.value設定為0 ,即重新顯示為0
} else {
//利用switch陳述句完成 = - * /運算,結果以的字串形式統一輸出
switch (type) {
case "+":
input.value = (firstValue + Number(input.value)).toString();
break;
case "-":
input.value = (firstValue - Number(input.value)).toString();
break;
case "*":
input.value = (firstValue * Number(input.value)).toString();
break;
case "/":
if (Number(input.value) === 0) input.value = "0";
else{
input.value = (firstValue / Number(input.value)).toString();
break;
}
bool = true;
// 當按下等號后 bool設定為true 進行上面的判斷 使input.value="0",bool=false 進而不影響接下來的運算
}
}
};
}
</script>
</body>
</html>
效果圖：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/198277.html
標籤：AI
上一篇：Day34專案saas-export專案-BaseController作父類
下一篇：事件流