如何使用 HTML、CSS 和 JavaScript 構建簡單的計算器
學習 JavaScript 的最好方法是構建項目。如果你想成為一名優秀的Web開發人員，你需要盡快開始創建項目。您可以從構建初學者級別的項目開始，例如簡單的計算器、數字時鐘或秒錶。
利用 HTML、CSS 和 JavaScript 等基本 Web 技術，人們可以輕鬆構建一個能夠執行基本算術運算（包括加法、減法、乘法和除法）的基本計算器。
計算器的特點
這項工作的目標是創建一個具有以下功能的高級計算器:
該設備能夠執行基本的數學運算，例如加法、減法、除法和乘法。
⭐它將執行小數運算。
當嘗試計算任何數量除以零的結果時，計算器應顯示無窮大作為其輸出。
如果輸入的表達式被認為無效，搜索引擎將不會提供響應。例如，輸入“5+\+9”將不會產生任何結果。
“清除屏幕”功能允許您自行決定立即刪除顯示屏上的所有內容。
本次活動中使用的源代碼可通過 GitHub 存儲庫訪問，該存儲庫授予您根據 MIT 許可條款免費使用它的權限。如果您想查看該項目的操作示例，請訪問我們的演示。
計算器的組成部分
該計算器由以下組件組成:
該組數學運算包括用符號“+”表示的加法、用“-”表示的減法、用“*”表示的乘法以及用“/”表示的除法。
數字和小數按鈕由 0 到 9 的數字以及小數點符號 (.) 組成。
顯示屏呈現數學表達式及其相應結果的視覺表示。
“清除屏幕”按鈕是一個用戶友好的工具，可讓您消除顯示屏上所有當前的數學表達式，確保為您未來的計算提供新的信息。
“計算”按鈕是計算輸入的數學表達式的命令，從而產生顯示的輸出值。
計算器項目的文件夾結構
為了創建交互式計算器 Web 應用程序，請建立一個名為“計算器”的主目錄。該目錄將包含各種基本組件，例如 HTML、CSS 和 JavaScript 文件。您可以自行選擇這些文件的名稱；但是，謹慎的做法是遵守每種文件類型的既定命名約定。根據典型實踐，HTML 文件的標題應為“index.html”，而其隨附的 CSS 文件應標記為“styles.css”，JavaScript 文件應稱為“script.js”。通常建議同時遵守 JavaScript 和 HTML/CSS 命名標準，以確保一致性並促進開發人員之間的順利協作。
使用 HTML 添加結構到計算器
請打開“index.html”文件並插入為計算器提供的 HTML 代碼，如下所示:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simple Calculator using HTML, CSS and JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class="calculator" >
<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
<!-- clearScreen() function clears all the values -->
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="\+" onclick="display('\+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>
<!-- calculate() function evaluates the mathematical expression -->
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
本項目採用atag來建立計算器的通用配置。其中有五個標籤，每個標籤代表計算器的一個水平部分。每個標籤都有自己相應的標籤，其中包含包含計算器顯示屏和功能鍵的標籤。
使用 CSS 設計計算器樣式
請打開“styles.css”文件並插入後續CSS代碼以在網站上實現計算器:
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
#btn {
background-color: #fb0066;
}
input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
input:active[type=button] {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
提供的代碼定義了一個自定義 HTML 標籤“calc”，它代表一個計算器界面，包括用於各種數學運算的按鈕，例如加法、減法、乘法、除法、清除和等於。它還包括兩個數字和一個等號的輸入字段。按鈕標籤使用其自己的 div 元素內的絕對定位顯示在每個按鈕的頂部，該元素應用了填充和邊框半徑。此外，它還利用Tailwind CSS 類，如flex、px-4、py-2、rounded-md、bg-white、text-red-500、hover:bg-gray-100、focus:outline-none 和過渡到樣式calc 標籤的外觀。最後，它使用“@import”從 Google Fonts 導入 Orbitron 字體系列
使用 JavaScript 向計算器添加功能
請通過合併提供的 JavaScript 代碼來修改現有的“script.js”文件，以增強基本計算器的功能，如下所示:
// This function clears all the values
function clearScreen() {
document.getElementById("result").value = "";
}
// This function displays the values
function display(value) {
document.getElementById("result").value \+= value;
}
// This function evaluates the expression and returns the result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
理解 JavaScript 代碼
上述功能賦予計算器特定的功能，分別包括屏幕擦除、輸出的可視化呈現以及數學運算的執行。
清算值
“clearScreen()”函數利用具有指定 ID 的元素的標識符（稱為“結果”），以便訪問文檔對像模型 (DOM) 並通過將其設置為空字符串來修改其內容。此過程通常稱為操作 DOM。可以通過使用 DOM 選擇器來訪問和修改網頁的各個部分，這些選擇器是識別 DOM 層次結構內的特定元素的特定代碼，用於更改其屬性或內容。
function clearScreen() {
document.getElementById("result").value = "";
}
顯示值
“display()”函數的實現涉及通過與所選選項關聯的標識符訪問文檔對像模型（DOM），然後將相應的值附加到 DOM 內的標識元素。
function display(value) {
document.getElementById("result").value \+= value;
}
評估表達式
“calculate()”函數通過利用特定元素的標識符訪問文檔對像模型（DOM）來檢索表達式的計算值，隨後使用“eval()”函數來計算表達式。隨後，計算出的結果被重新分配給指定的元素。
JavaScript的evaluate()函數用於計算給定的表達式，該表達式作為函數的輸入提供，並隨後產生從該表達式派生的結果。
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
開發酷炫的編程項目
提高編程熟練程度的一種有效方法是進行項目開發，無論他們是新手還是在長期中斷後重新編碼。功能應用程序（包括具有基本功能的應用程序）的成功完成和實施可以增強自信心。
事實上，有很多可以進行的活動，從國際象棋和井字棋等娛樂活動到待辦事項列表、體重轉換器和倒計時器等實用工具，人們可以嘗試一下。
讓自己沉浸在這些項目中，通過實踐學習獲得實踐經驗來增強您的開發技能。