溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關使用JavaScript怎么實現一個計算器，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
具體內容如下
<!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;
}
.divs > input {
width: 460px;
height: 45px;
margin-left: 18px;
margin-top: 10px;
font-size: 30px;
background-color: white;
text-align: right;
}
.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 />
<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>js:
<script>
// 獲取到所有類名為block的元素
var blocks = document.getElementsByClassName("block");
// 獲取到input
var input = document.getElementById("input1");
// 聲明第一個數值
var firstValue = 0,
bool = false;
// 聲明運算符
var type;
for (var i = 0; i < blocks.length; i++) {
//點擊第i個block
blocks[i].onclick = function () {
//點擊誰，this就指向誰，在這里this指向每次點擊的元素
console.log(this);
//this.innerHTML顯示點擊的div里面的內容（比如1,2,3,-,+）
//判斷點擊的為數字的情況（不是NaN，就是數字）
if (!isNaN(this.innerHTML)) {
// bool初始為false,當bool為false時,可以不斷輸入,當bool為true時，input清空為0
if (bool) {
input.value = "0";
bool = false;
}
// 將input中的value累加點擊的內容，將它強轉為數字是為了去掉最前面的0，最后再轉為字符
input.value = Number(input.value + this.innerHTML).toString();
} else {
//判斷點擊為+ - * /的情況
if (this.innerHTML !== "C" && this.innerHTML !== "=") {
//將第一個數存到firstValue
firstValue = Number(input.value);
//將運算符存到type
type = this.innerHTML;
//將input中的value重置為0
input.value = "0";
} else if (this.innerHTML === "C") { //判斷點擊C的情況
// 全都重置
firstValue = 0;
type = undefined;
input.value = "0";
} else { //判斷點擊=的情況
//根據運算符的類型進行運算
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 "/":
// 除數為0時重置input.value
if (Number(input.value) === 0) input.value = "0";
else
input.value = (firstValue / Number(input.value)).toString();
break;
}
//bool為true時，點擊"="后,當再次輸入時，input.value為0
bool = true;
}
}
};
}上述就是小編為大家分享的使用JavaScript怎么實現一個計算器了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
