建立計算器 Web 應用程式是學習 HTML、CSS 和 JavaScript 的絕佳專案。儘管計算器很常見或相當普通，但從頭開始建立計算器可以幫助初學者理解 Web 開發(fā)的基本概念，例如使用 HTML 建立內(nèi)容、使用 CSS 設定元素樣式以及使用 JavaScript 添加互動功能。

在本概述中，我們將逐步介紹建立功能齊全的計算器所需的程式碼的每個部分。本指南不僅提供程式碼，還將詳細解釋每一行，確保您了解所有內(nèi)容如何組合在一起。到本專案結束時，您將擁有一個流暢的互動式計算器，您可以對其進行個性化設置，甚至可以使用更高級的功能進行擴充。

計算器的功能
此計算器包括基本功能：

顯示目前輸入和結果的顯示區(qū)域。

數(shù)字按鈕 (0–9) 和一個附加的「00」按鈕。

算術運算按鈕：加法( )、減法(-)、乘法(*)、除法(/)。

特殊按鈕：

• AC 清除目前輸入。

• DEL 刪除最後一個字元。

• /- 在正數(shù)和負數(shù)之間切換。

• = 計算表達式並顯示結果。

透過這個項目，您將學習如何：

• 使用 HTML 建立使用者介面。

• 使用 CSS 設計元素以提高視覺吸引力。

• 使用 JavaScript 實作計算器邏輯處理按鈕
  互動並執(zhí)行計算。

第 1 步：HTML 結構 - 建立計算器的佈局

HTML 程式碼為我們的計算器提供了基礎結構。在這一部分中，我們定義了構成計算器的元素，例如按鈕和顯示區(qū)域，您可以使用您選擇的任何編輯器來實現(xiàn)此效果，我個人更喜歡 Visual studio 程式碼。以下是計算器的完整 HTML 程式碼：

告訴瀏覽器這是 HTML5 文件。

開始 HTML 文件並指定英文為語言。這有助於搜尋引擎和螢幕閱讀器理解文件的語言。

頭部：

包含對文件很重要但使用者不可見的元資料和連結。

設定字元編碼，確保與大多數(shù)語言相容。

透過調整頁面佈局以適應不同的設備，使頁面具有回應能力。

設定瀏覽器標籤上顯示的標題。

指向定義樣式的 CSS 檔案的連結。

計算機版面：

指向處理計算器功能的 JavaScript 檔案的連結。

第 2 步：CSS 樣式 - 設計計算器介面

現(xiàn)在我們有了結構，讓我們開始設計樣式。此 CSS 程式碼將使計算器看起來更現(xiàn)代，添加顏色、圓形按鈕、陰影和響應式佈局調整。

說明

基本重置與字體：

刪除預設的填滿和邊距，將 box-sizing 設為 border-box 以保持大小一致，並套用現(xiàn)代字體。

身體造型：

body：使用 Flexbox 將計算器容器置於螢幕中央並套用漸層背景。

計算機容器：

.calculator：加入內(nèi)邊距、圓角和陰影，打造整齊的卡片式外觀。

顯示輸入：

輸入：這種樣式為顯示區(qū)域提供了大字體和右對齊，類似於真正的計算器顯示。

按鈕樣式：

.計算器按鈕：設定帶有陰影效果、白色文字顏色和對齊間距的圓形按鈕。

.actionbtn、.clearbtn 和 .enter：特定按鈕的樣式，使它們脫穎而出（例如，綠色表示運算符，紅色表示清除，橙色表示等於）。

第 3 步：這是所有 JavaScript 邏輯發(fā)生的地方 - 讓計算器發(fā)揮作用

結構和風格都已完成，讓我們使用 JavaScript 添加功能。這個腳本允許我們處理按鈕的點擊、執(zhí)行算術並顯示結果。

說明

頁面載入事件監(jiān)聽器：

確保腳本在載入所有 HTML 內(nèi)容後執(zhí)行。

輸入與按鈕變數(shù)：

選擇顯示區(qū)域。

將所有按鈕收集在一個陣列中以便於操作。

按鈕點選事件：

為每個按鈕新增點擊事件。根據(jù)按鈕的不同，執(zhí)行不同的操作：

顯示字體大小調整：當輸入長度超過 10 個字元時縮小字體大小。

等號 (=)：使用 eval() 計算表達式並顯示結果。如果出現(xiàn)錯誤（例如無效語法），則會顯示「錯誤」。

清除 (AC)：重置字串並清除顯示。

刪除 (DEL)：從字串中刪除最後一個字元並更新顯示。

數(shù)字和運算子按鈕：將按鈕的值加到字串並更新顯示。

切換符號 ( /-):

將當前數(shù)字乘以 -1 以在正值和負值之間切換。

最後，使用 HTML、CSS 和 JavaScript 建立一個簡單但功能強大的計算器 Web 應用程式對於初學者和經(jīng)驗豐富的開發(fā)人員來說都是一個很棒的專案。透過仔細結合 HTML 提供的結構基礎、CSS 賦予的風格元素以及 JavaScript 提供的互動功能，我們可以創(chuàng)建一個直覺的工具，它不僅能滿足其主要目的，還能示範核心 Web 開發(fā)概念。

此外，該計畫為進一步探索和增強開闢了廣泛的可能性。這裡學到的經(jīng)驗教訓為更複雜的項目提供了全面的基礎。 Web 開發(fā)是一個持續(xù)的學習過程，該專案展示了每一行程式碼如何為功能性、引人入勝的體驗做出貢獻。

隨著您不斷提高自己的技能，請考慮如何使這個計算器更加用戶友好和強大。嘗試不同的佈局，嘗試實作額外的數(shù)學函數(shù)。您所做的每一次更改都會加深您對編碼原則的理解並增強您的開發(fā)資源。

編碼快樂！

以上是建立一個簡單的基於 Web 的計算器：使用 Html CSS 和 JavaScript 分步 Guild的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！