學(xué)習(xí) Javascript 的基本和最好的方法之一是構(gòu)建一個(gè)簡單的計(jì)算器。在本教程中，我將逐步引導(dǎo)您了解如何構(gòu)建和部署這個(gè)令人驚嘆的項(xiàng)目。
前提
超文本標(biāo)記語言
CSS
使用 JavaScript 進(jìn)行基本 DOM 操作。
你的項(xiàng)目應(yīng)該具備的能力：
嘗試自己實(shí)現(xiàn)這些條件，然后回來跟進(jìn)
1. 您的計(jì)算器將有 html 文件。這是該項(xiàng)目的骨架。
設(shè)置數(shù)字（0-9）、運(yùn)算符（x、/、-、+）、等于（=）、清除和刪除按鈕。
設(shè)置兩個(gè)顯示輸入。對于先前值和當(dāng)前值。
2. 它必須有一個(gè) CSS 文件來設(shè)置按鈕和整個(gè)項(xiàng)目的樣式，以便看起來不錯。
3.它必須有一個(gè)JAVASCRIPT文件來為計(jì)算器添加交互性。
4. 在 Javascript 上，您的文件中應(yīng)包含以下條件和函數(shù)：
您的文件將具有基本數(shù)學(xué)運(yùn)算的函數(shù)，即加、減、除和乘
一個(gè)運(yùn)算將由第一個(gè)數(shù)字、運(yùn)算符和第二個(gè)數(shù)字組成，即 6（第一個(gè)數(shù)字）x（運(yùn)算符）7（第二個(gè)數(shù)字）；
為上述每個(gè)部分創(chuàng)建三個(gè)變量
創(chuàng)建一個(gè)函數(shù)，該函數(shù)接受第一個(gè)數(shù)字、運(yùn)算符和第二個(gè)數(shù)字，然后調(diào)用每個(gè)基本數(shù)學(xué)運(yùn)算。您可以將其稱為operatorFunc
創(chuàng)建一個(gè)函數(shù)，將單擊的按鈕的值和計(jì)算后的結(jié)果添加到 HTML 中的顯示中。
您應(yīng)該找到一種方法將從 html 輸入的數(shù)字存儲到第一個(gè)和第二個(gè)數(shù)字變量中，然后利用用戶選擇的運(yùn)算符調(diào)用 operaFunc() 。
確保在用戶單擊等于后顯示計(jì)算結(jié)果。
5. 這是項(xiàng)目中最難的部分，您需要找到一種方法來存儲 DOM 中的值，然后用它們 調(diào)用operatorFunc 。
這些是您的項(xiàng)目應(yīng)該滿足的最基本的條件。嘗試自己實(shí)施它們，如果您感到迷茫，請回來我們一起解決。
超文本標(biāo)記語言
現(xiàn)在是時(shí)候投入其中了！
讓我們從設(shè)置 html 文件開始。將其命名為index.html
將其鏈接到CSS（在頁眉中）和JavaScript 文件（在頁腳下方的正文中）。
這是代碼：
<!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Javascript calculator Project</title> <link rel="stylesheet" href="index.css" /> </head> <body> <script src="index.js"></script> </body> </html>
設(shè)置Body
A。添加按鈕：數(shù)字（0-9）、運(yùn)算符（X、/、-、+）、等于（=）、清除（AC）和刪除按鈕（Delete）。
b. 確保適當(dāng)添加 id 和類，因?yàn)樗鼈儗⒃?css 中用于樣式設(shè)置。
C。添加兩個(gè)顯示輸入。
不適用。您可以自由使用按鈕，在下面的代碼中，我使用了按鈕類型的輸入元素
<body> <h1>Javascript Calculator</h1> <div class="calc-container"> <div class="display_container"> <div id="displayPrev" class="display"></div> <div id="displayCurr" class="display">0</div> </div> <div class="clear-and-delete-container"> <input type="button" value="Delete" id="delete" class="remove-btn" /> <input type="button" value="AC" id="AC" class="remove-btn" /> </div> <div class="btn-container"> <input type="button" value="7" class="btn" id="7" /> <input type="button" value="8" class="btn" id="8" /> <input type="button" value="9" class="btn" id="9" /> <input type="button" value="÷" class="operant divide" id="/" /> <input type="button" value="4" class="btn" id="4" /> <input type="button" value="5" class="btn" id="5" /> <input type="button" value="6" class="btn" id="6" /> <input type="button" value="x" class="operant multiply" id="x" /> <input type="button" value="1" class="btn" id="1" /> <input type="button" value="2" class="btn" id="2" /> <input type="button" value="3" class="btn" id="3" /> <input type="button" value="-" class="operant subtraction" id="-" /> <input type="button" value="." class="btn period" id="period" /> <input type="button" value="0" class="btn" id="1" /> <input type="button" value="=" class="equals" id="equals" /> <!-- operants --> <input type="button" value="+" class="operant add" id="+" /> </div> <div class="operants"></div> </div> <script src="index.js"></script> </body>
CSS
是時(shí)候設(shè)置 HTML 樣式了。您可能需要確保操作按鈕具有不同的顏色。另外，請確保使用布局樣式，即實(shí)現(xiàn)網(wǎng)格或 Flexbox 布局。這將確保按鈕排列良好并且全部適合可用空間。在下面的代碼中，我使用了兩者。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
background: #f0ffff;
display: grid;
justify-content: center;
align-content: center;
margin: 0 auto;
overflow-x: hidden;
}
.calc-container {
width: 350px;
height: 485px;
margin: 2rem auto;
background: #aaaaaa;
padding: 0.5rem;
border: transparent;
border-radius: 15px;
}
.display_container {
display: grid;
background-color: #f0ffff;
border: transparent;
border-radius: 15px;
margin: 0.2rem 0;
}
.display {
text-align: right;
padding: 0.5rem;
border: 0;
color: black;
outline: none;
width: 100%;
height: 40px;
border-style: none;
font-size: 30px;
}
.clear-and-delete-container {
display: flex;
}
.clear-and-delete-container input {
width: 100%;
border: 1px solid black;
border-radius: 10px;
}
.btn-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0.2rem;
}
.btn,
.operant {
width: 80px;
margin: 0.1rem;
height: 80px;
border: 1px solid black;
border-radius: 10px;
background: #ffff;
z-index: 0;
transition: background-color 0.25s ease-in 0.09s;
}
.remove-btn:nth-child(2) {
height: 45px;
background: #9999ee;
}
.remove-btn:nth-child(1) {
background: red;
}
.btn:hover {
background-color: transparent;
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
}
.remove-btn:hover {
background: rgba(255, 255, 255, 0.2);
color: black;
}
.equals {
width: 80px;
margin: 0.1rem;
height: 80px;
border: 1px solid black;
border-radius: 10px;
background: #49ca3e;
}
.equals:hover {
background: #ffff;
}
.period {
font-size: larger;
}
.divide {
background: #b2b2d1;
}
.multiply {
background: #00b1c5;
}
.subtraction {
background: orange;
}
.add {
background: #e15a46;
}
.operant:hover {
background: #ffff;
}上面的代碼可能看起來很多，但實(shí)際上并非如此。花點(diǎn)時(shí)間瀏覽并理解它的樣式。
腳本語言
現(xiàn)在我們來到了最重要的部分。項(xiàng)目的邏輯部分。
首先，我們將回顧我之前提供的步驟。
將所有已初始化的變量放在 javascript 文件的開頭是一個(gè)很好的做法。
下面的代碼說明了我們需要的大部分變量。
A。首先，我們將第一個(gè)數(shù)字和第二個(gè)數(shù)字初始化為0；
然后我們將運(yùn)算符初始化為空，以便當(dāng)用戶單擊任何運(yùn)算符按鈕時(shí)，值都會更新并存儲在該變量中。
這與result和previousComput變量相同，即如果用戶單擊 equals，我們運(yùn)行計(jì)算，然后結(jié)果將存儲在result變量中，如果他們選擇繼續(xù)操作，結(jié)果也會存儲在previousComput變量中。
let firstNumber = 0; let secondNumber = 0; let operator = ""; let previousComput = ""; let result = 0;
b. 從 DOM 中獲取數(shù)據(jù)并將其存儲在變量中。
這里我們使用querySelector和querySelectorAll來選擇元素。以下是我們可能需要的所有變量。
const calcValues = document.querySelectorAll(".btn");
let displayPrev = document.querySelector("#displayPrev");
let displayCurr = document.querySelector("#displayCurr");
const equals = document.querySelector(".equals");
const operants = document.querySelectorAll(".operant");
const clear = document.querySelector("#AC");
const deleteEl = document.querySelector("#delete");C。設(shè)置函數(shù)來監(jiān)聽 DOM 事件。
下面的代碼偵聽操作符（X、/、-、+）按鈕上的單擊事件并做出相應(yīng)響應(yīng)，即更新顯示值、存儲要在計(jì)算中使用的單擊操作符的值等等！請注意 if...else 語句。
operants.forEach((operant) => {
operant.addEventListener("click", () => {
if (displayPrev.innerHTML == "") {
firstNumber = displayCurr.innerHTML;
displayPrev.innerHTML = `${displayCurr.innerHTML} ${operant.value} `;
displayCurr.innerHTML = "";
operator = operant.value;
} else {
previousComput = concatFunc();
displayPrev.innerHTML = previousComput + " " + operant.value + " ";
operator = operant.value;
firstNumber = previousComput;
displayCurr.innerHTML = "";
}
});
});d. 接下來，設(shè)置一個(gè)函數(shù)來監(jiān)聽數(shù)字按鈕（0-9）的點(diǎn)擊事件。
下面就是這樣一個(gè)函數(shù)。它獲取單擊的值并將它們存儲為firstNumber 或secondNumber。請注意，第二個(gè)數(shù)字僅在第一個(gè)數(shù)字更新并且用戶單擊操作后才會更新。
它還會顯示 displayCurr 元素中的值，因?yàn)檫@是當(dāng)前正在發(fā)生的操作。記下handleClick 函數(shù)。它是一個(gè)回調(diào)函數(shù)（...它已作為另一個(gè)函數(shù)中的參數(shù)傳遞）
const handleClick = (e) => {
displayCurr.innerHTML === "0"
? (displayCurr.innerHTML = e.target.value)
: (displayCurr.innerHTML += e.target.value);
};
calcValues.forEach((button) => {
button.addEventListener("click", handleClick);
});現(xiàn)在是我們設(shè)置基本數(shù)學(xué)運(yùn)算函數(shù)的時(shí)候了。加法、減法等。
稍后我們將在 operaFunc 中調(diào)用這些函數(shù)。這些函數(shù)僅采用兩個(gè)參數(shù)，第一個(gè)數(shù)字和第二個(gè)數(shù)字，然后將根據(jù)所選的運(yùn)算符執(zhí)行操作。操作符將由 operaFunc() 提供；
請注意：
變量前的加號將其從字符串轉(zhuǎn)換為數(shù)字
此外，我們希望防止返回小數(shù)點(diǎn)太長的答案。為此，我們使用 toFixed();
//let result = 0;
const multiply = (firstNumber, secondNumber) => {
//The plus before a number converts it to a number from being a string
//Also We want to prevent returning answers that have too long decimals so to
//Do that we use toFixed();
result = +firstNumber * +secondNumber;
if (!Number.isInteger(result)) {
return result.toFixed(2);
}
return result;
};
const divide = (firstNumber, secondNumber) => {
if (+secondNumber === 0) {
alert("You can't divide a number by zero!");
location.reload();
} else {
result = +firstNumber / +secondNumber;
if (!Number.isInteger(result)) {
return result.toFixed(2);
}
return result;
}
};
const add = (firstNumber, secondNumber) => {
result = +firstNumber + +secondNumber;
if (!Number.isInteger(result)) {
return result.toFixed(2);
}
return result;
};
const subtract = (firstNumber, secondNumber) => {
result = +firstNumber - +secondNumber;
if (!Number.isInteger(result)) {
return result.toFixed(2);
}
return result;
};我們希望確保用戶能夠刪除號碼或清除屏幕。下面的代碼解決了這個(gè)問題。
請參考數(shù)組方法來理解為什么我們使用.slice();
clear.addEventListener("click", () => {
displayPrev.innerHTML = "";
displayCurr.innerHTML = "";
});
deleteEl.addEventListener("click", () => {
if (displayCurr.innerHTML !== "") {
displayCurr.innerHTML = displayCurr.innerHTML.slice(0, -1);
} else {
displayPrev.innerHTML = displayPrev.innerHTML.slice(0, -1);
displayCurr.innerHTML += displayCurr.innerHTML;
}
});e. 是時(shí)候顯示結(jié)果并使計(jì)算器工作了！
編寫一個(gè)函數(shù)來偵聽等于按鈕上的單擊事件并對其進(jìn)行處理。
下面的代碼做了以下事情：
監(jiān)聽點(diǎn)擊事件并觸發(fā) concatFunc()
concatFunc 是該項(xiàng)目的核心。它觸發(fā) operaFunc，進(jìn)而調(diào)用基本數(shù)學(xué)運(yùn)算符函數(shù)并顯示結(jié)果。
我們使用 if...else 語句來添加有關(guān)何時(shí)調(diào)用某個(gè)函數(shù)的條件，并對意外行為發(fā)出警告。
equals.addEventListener("click", concatFunc);
function concatFunc() {
if (previousComput == "") {
secondNumber = displayCurr.innerHTML;
} else {
secondNumber = displayCurr.innerHTML;
}
displayPrev.innerHTML += `${displayCurr.innerHTML} ${equals.value}`;
const operatorFunc = (firstNumber, operator, secondNumber) => {
if (operator == "x") {
return multiply(firstNumber, secondNumber);
} else if (operator == "+") {
return add(firstNumber, secondNumber);
} else if (operator == "-") {
return subtract(firstNumber, secondNumber);
} else if (operator == "÷") {
return divide(firstNumber, secondNumber);
}
};
displayCurr.innerHTML = operatorFunc(firstNumber, operator, secondNumber);
return operatorFunc(firstNumber, operator, secondNumber);
}OK
您已經(jīng)創(chuàng)建了一個(gè) JavaScript 計(jì)算器。如果您沒有完成，請不要感到難過。大多數(shù)概念可能需要一段時(shí)間才能理解。
結(jié)論
通過完成這個(gè)項(xiàng)目，您學(xué)到了很多東西，包括：
如何使用 CSS 網(wǎng)格和 Flexbox
如何進(jìn)行變量聲明
如何從 DOM 獲取元素以及一般 DOM 操作。您已經(jīng)了解了 querySelector、querySelectorAll 和 getElementById 等方法在 DOM 操作中的用途。
如何使用事件偵聽器，尤其是“單擊”以及后續(xù)的回調(diào)函數(shù)鏈接
如何正確調(diào)用函數(shù)
最后，您學(xué)會了如何在建立項(xiàng)目時(shí)有效地進(jìn)行邏輯思考。文章來源：http://www.zghlxwxcb.cn/article/506.html
文章來源地址http://www.zghlxwxcb.cn/article/506.html
到此這篇關(guān)于使用JavaScript寫一個(gè)完整的計(jì)算器效果的文章就介紹到這了,更多相關(guān)內(nèi)容可以在右上角搜索或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
