2022 年使用 JavaScript、HTML 和 CSS 構建計算器

已發表: 2021-01-02

無論您是在學習新的編程語言還是開發框架，總有一天您必須從事現實世界的項目。在學習該主題的過程中，您應該測試您的技能和對語言的理解。使用新學習的技術或框架構建項目是一個好主意。網上有很多關於你應該用你的知識創造什麼的想法。

最常見的建議包括JavaScript 中的計算器和待辦事項列表。雖然它們看起來很容易，但當您開始從事這些項目時，這可能是一項艱鉅的任務。在這裡，我們將為您提供簡單、合乎邏輯和多事的信息。

我們開始吧？

邏輯先於一切

當你開始做一個項目時，無論是計算器還是待辦事項列表，你首先需要確定的就是邏輯。

計算器是如何工作的？

您可以使用計算器上提供的數字鍵添加兩個或多個數字（任意位數）。
然後，您對這些數字執行基本算術功能，即加法、減法、乘法和除法。
計算器應該能夠計算並給出正確的解決方案。

這是您的計算器工具的前提。所以你需要一個鍵盤、一個顯示單元和功能元件。

“等於”按鈕將評估答案，而“清除”按鈕將確保刪除計算器顯示屏上的所有輸入。

從世界頂級大學學習在線軟件開發課程。 獲得行政 PG 課程、高級證書課程或碩士課程，以加快您的職業生涯。

處理項目：構建代碼的關鍵

你需要學習如何處理一個新項目，而不是馬上去看代碼。你準備好了兩件事：邏輯和對前端技術的基本了解，即 JavaScript、HTML 和 CSS。

在開始使用 JavaScript 構建計算器之前，您需要以下內容：

一個集成開發環境，可幫助您使用所有三種技術構建項目。
一個本地服務器，可以幫助您測試代碼並消除錯誤。因此，您將能夠更快、更敏捷地啟動應用程序。

#1 HTML 入門

第一步是讓你的手稍微弄髒 HTML，這樣你就已經為你的計算器構建了大綱。

計算器上有十個按鈕，範圍從 0 到 9。HTML 負責為每個數字構建鍵。

除此之外，在使用 JavaScript 構建計算器時，您還需要使用 HTML 為不同的算術函數創建單獨的鍵。

您可以使用 HTML 添加按鈕以顯示輸入的數字或結果以及清除顯示。

計算器的視覺單元完全依賴於 HTML 和 CSS，其中的按鈕及其 ID 需要使用 HTML 創建。

樣板代碼

<!DOCTYPE html>

<頭部>

<元字符集=”UTF-8″>

</head>

<正文>

創建計算器輪廓的實際代碼

(

<!– 計算器–>

<!– 鍵–>

<!– 4 行鍵 –>

</div>

</div>

<按鈕值=”2″>2</button>

</div>

</div>

<!– 計算器主體結束–>

</正文>

</html>

學習： Github 中最適合初學者的 20 個 Javascript 項目

#2 樣式與 CSS

一旦定義了計算器的結構，您將使用內聯 CSS 元素來為您的計算器設置樣式，並使其具有視覺吸引力且易於使用。

雖然內聯 CSS 在設計和設置應用外觀樣式方面非常出色，但它可能對 SEO 不友好。除此之外，您還可以通過將外部 CSS 元素標記到相同的根目錄來使用它們。您甚至可以使用 head 部分的 <style></style> 標記中存在的內部或嵌入式 CSS 元素。

在這裡，我們將帶您了解可用於設置計算器樣式的代碼。

（如果需要，您可以創建此代碼的變體。）

/* 常用樣式 */

* {

填充：0；

邊距：0；

}

身體 {

寬度：100vw；

高度：100vh；

溢出：隱藏；

顯示：彎曲；

證明內容：中心；

對齊項目：居中；

背景顏色：#222831；

字體系列：無襯線；

}

/* 常用樣式結束 */

/* 計算器 */

.計算器{

寬度：300px；

底部填充：15px；

邊框半徑：7px；

背景顏色：#000；

盒子陰影：5px 8px 8px -2px rgba(0, 0, 0, 0.61);

}

/* 計算器樣式結束 */

/* 展示 */

。展示 {

寬度：100%；

高度：80px；

邊框：無；

box-sizing：邊框框；

填充：10px；

字體大小：2rem；

背景顏色：#00ff44；

顏色：#000；

文本對齊：右；

邊框左上角半徑：7px；

邊框右上角半徑：7px；

}

/* 顯示樣式結束 */

/* 排 */

。排 {

顯示：彎曲；

justify-content: 之間的空格；

}

/* 行樣式結束 */

/* 按鈕 */

按鈕 {

寬度：50px；

高度：50px；

邊界半徑：50%；

邊框：無；

大綱：無；

字體大小：1.5rem；

背景顏色：#222；

顏色：#fff;

邊距：10px；

}

按鈕：懸停{

光標：指針；

}

/* 按鈕樣式結束 */

/* 操作員 */

。操作員 {

背景顏色：#00ff44；

顏色：#000；

}

/* 運算符風格結束 */

#3 使用 JavaScript 添加功能

我們現在已經詳細討論了使用 JavaScript 構建計算器的可見方面。讓我們編寫一些腳本來幫助使計算器正常工作並執行計算任務。我們將了解構建 JS 代碼所涉及的幾個步驟，這將幫助您更快地開發代碼。

您將需要使用 JavaScript 調用您為各個函數創建的 HTML 標記。您將使用選擇器來調用這些輸入中的每一個並將它們存儲在一個變量中。對於每個函數，您都需要一個變量。例如，有一個單獨的變量用於顯示、數字、清除函數以及等於函數。在這種情況下可以使用 getElementbyID() 函數。
假設您要執行一個簡單的 20+30 計算，您將首先使用上面提到的方法調用 20。在調用 30 和算術函數之前，您需要將之前調用的 20 存儲在某處。您的代碼應該為臨時存儲數字騰出空間，以便於計算。一個空數組會將數字保存為字符串。一旦你添加了另一個數字和算術函數，使用 eval()，你可以計算數字並得到答案。
當您單擊計算器中的按鈕時，您想要一些結果，或者顯示它們，或者對它們進行評估。為此，您應該將事件偵聽器添加到您的代碼中。這樣，按鈕將聽取點擊。當您向事件偵聽器添加函數時，它們將自動執行單擊聲音的任務。
顯示單元應返回您單擊的按鈕的值。您可以使用 event.target 對象，因為它將返回發生事件的元素的值。例如，您希望在單擊數字“1”時立即顯示它。為此，您需要以變量的形式存儲數字。使用“if”函數，您將比較現有變量以確定它是否為零。如果它是零，那麼您將把它附加到一個空字符串中，這樣任何數字都不會以零開頭。最後，將鍵“1”的內容添加到顯示變量中。結果，只要觸發數字鍵，您就會看到顯示框中的內容。
最後，您需要創建有助於將數學運算應用於顯示數字的函數。確保您的 JavaScript計算器可以輕鬆執行數學計算。要啟用此功能，您可以使用語法和方法的組合。我們已指定以下 JavaScript 元素的代碼供您閱讀。

//選擇所有按鈕

常量按鈕 = document.querySelectorAll('button');

// 選擇 <input type=”text” class=”display” disabled> 元素

const display = document.querySelector('.display');

// 為每個按鈕添加事件監聽器

button.forEach（功能（按鈕）{

button.addEventListener('點擊'，計算);

});

//計算函數

函數計算（事件）{

// 當前點擊的按鈕值

常量 clickedButtonValue = event.target.value;

if (clickedButtonValue === '=') {

// 檢查顯示是否為空然後只進行計算

if (display.value !== ”) {

// 計算並顯示答案

display.value = eval(display.value);

}

} else if (clickedButtonValue === 'C') {

// 清除顯示的所有內容

顯示值=”；

} 別的 {

// 否則將其連接到顯示器

display.value += clickedButtonValue;

}

必讀： Java 架構和組件解釋

加起來

無論您是使用 JavaScript 構建計算器還是從事更複雜的項目，我們的想法都是以合乎邏輯和可解釋的方式分解內容。這將幫助您獲得準確的語法，並生成流暢的 Web 應用程序。與其直接從編碼開始，不如嘗試了解您使用的技術的真正目的是什麼，它將引導您找到代碼。

如果您有興趣了解有關 Java、全棧軟件開發的更多信息，請查看 upGrad 和 IIIT-B 的軟件開發執行 PG 計劃——全棧開發專業化，專為工作專業人士設計，提供 500 多個小時的嚴格培訓, 9+ 項目和任務，IIIT-B 校友身份，實用的實踐頂點項目和頂級公司的工作協助。

踏上夢想的工作

申請 upGrad 的軟件工程與工作相關的 PG 認證