用 JavaScript 創(chuàng)建函數(shù)計(jì)算器很有趣，并且使用了很多概念，例如 DOM 操作、事件處理、條件邏輯、字符串操作、算術(shù)運(yùn)算、鍵盤(pán)輸入集成和用戶界面的 CSS 樣式。在這篇博文中，我們將深入研究代碼，分解每一行以了解其屬性和功能。讀完本博客后，我們將牢牢掌握計(jì)算器的工作原理。
讓我們開(kāi)始吧。
設(shè)置 HTML 結(jié)構(gòu)
HTML 很簡(jiǎn)單，從標(biāo)準(zhǔn)樣板開(kāi)始。下面是index.html
的代碼片段
標(biāo)簽鏈接到外部 JavaScript 文件 script.js，其中定義了計(jì)算器的邏輯和功能。該外部文件處理用戶交互和計(jì)算，使計(jì)算器能夠按預(yù)期執(zhí)行操作。
這里，顯示框顯示輸入并顯示結(jié)果，而按鈕框則容納所有計(jì)算器按鈕。
添加 CSS 進(jìn)行樣式設(shè)置
現(xiàn)在，讓我們?cè)O(shè)計(jì)我們的計(jì)算器，使其具有視覺(jué)吸引力且用戶友好。
讓我們分解一下 CSS 代碼。
- 包裝樣式
最小高度：100vh；確保包裝器至少占據(jù)視口的整個(gè)高度。顯示屏：柔性；實(shí)現(xiàn)靈活的布局，允許其子項(xiàng)對(duì)齊。調(diào)整內(nèi)容：居中；使內(nèi)容水平居中，同時(shí)align-items: center;將內(nèi)容垂直居中。最后，邊框：2px純黑；在包裝周?chē)砑舆吙颉?/p>
- 計(jì)算器容器樣式：
顯示：flex；使計(jì)算器容器變得靈活，允許將子元素布置在行或列中。彎曲方向：列；垂直排列子元素。間隙：12px；添加每個(gè)部分或元素之間的間距。最后寬度：500px；將計(jì)算器的寬度設(shè)置為 500px。
- 展示盒造型
邊框：1px純黑；為顯示框添加邊框。內(nèi)邊距：16px；在盒子內(nèi)部留出空間以提高可讀性。文本對(duì)齊：右對(duì)齊；確保文本右對(duì)齊。字體大?。?4px；增加字體大小以提高可見(jiàn)性，同時(shí) border-radius: 5px;將盒子的角弄圓。
- 按鈕容器和按鈕樣式
這里，按鈕容器的樣式為 .flex-container，其中 display: flex;為其子元素創(chuàng)建靈活的布局。對(duì)齊內(nèi)容：空間之間；屬性均勻分布按鈕，按鈕之間留有空間，而間隙：8px；確保每個(gè)按鈕之間有適當(dāng)?shù)拈g距，以便更好地對(duì)齊。
每個(gè)按鈕都采用 flex: 1; 樣式，這使得它們?cè)谝恍兄姓紦?jù)相同的空間。內(nèi)邊距：16px；在每個(gè)按鈕內(nèi)添加空間以提高舒適度，字體大小：20px；確保文本可讀。字體粗細(xì)：粗體；使文本突出，同時(shí)邊框：1px純黑色；在每個(gè)按鈕周?chē)砑舆吙?。另外，邊框半徑?px；按鈕的角稍微變圓，光標(biāo)：指針；當(dāng)鼠標(biāo)懸停在其上時(shí)，將光標(biāo)更改為指針。按鈕的背景顏色設(shè)置為白色，background-color: rgb(255, 255, 255);.
對(duì)于“=”按鈕，.equal 類使用 flex: 2.5;給它更多的空間，使其寬度是其他按鈕的 2.5 倍。當(dāng)按鈕懸停時(shí)，button:hover樣式將背景顏色更改為灰色，背景顏色:rgb(127, 131, 131)；并將文本顏色設(shè)置為白色。這種過(guò)渡效果通過(guò)過(guò)渡進(jìn)行平滑：background-color 0.3s Easy, Color 0.3s Easy;，允許顏色之間有 0.3 秒的淡入淡出。
使用上面的 HTML 和 CSS，我們的計(jì)算器如下所示：
現(xiàn)在讓我們深入了解主要部分，為我們的計(jì)算器賦予生命。
JavaScript 代碼片段
讓我們分解代碼以便更好地理解。
- 選擇 DOM 元素
displayBox 變量保存對(duì)顯示框的引用 (
- 顯示變量和運(yùn)算符
displayValue 變量保存要在屏幕上顯示的當(dāng)前值，確保計(jì)算過(guò)程中的準(zhǔn)確更新。 lastOperator 變量跟蹤最后使用的操作符，防止連續(xù)操作符輸入等錯(cuò)誤。此外，console.log 用于調(diào)試目的，特別是記錄CalculatorBtns 節(jié)點(diǎn)列表以供審查。
- 按鈕點(diǎn)擊事件監(jiān)聽(tīng)器/循環(huán)每個(gè)按鈕
forEach方法用于循環(huán)遍歷calculatorBtns集合中的每個(gè)按鈕。對(duì)于每個(gè)按鈕，innerText屬性被分配給buttonValue變量，該變量保存按鈕上顯示的文本，例如“AC”，“C”，“9”，“ ”等
然后將 onclick 事件偵聽(tīng)器添加到每個(gè)按鈕。單擊按鈕時(shí)，將執(zhí)行分配的功能。該函數(shù)handleButtonAction(buttonValue) 將按鈕的文本(buttonValue) 作為參數(shù)。通過(guò)傳遞按鈕的值，該函數(shù)允許計(jì)算器執(zhí)行正確的操作，例如清除顯示、輸入數(shù)字或執(zhí)行數(shù)學(xué)運(yùn)算。
- 處理鍵盤(pán)輸入的按鍵
這使得計(jì)算器也可以與鍵盤(pán)一起使用。當(dāng)按下某個(gè)鍵時(shí)，會(huì)觸發(fā)相應(yīng)按鈕的操作。例如，按鍵盤(pán)上的“1”將觸發(fā)值為“1”的handleButtonAction()函數(shù)。
- 顯示功能
display()函數(shù)用當(dāng)前的displayValue更新顯示框(displayBox)的內(nèi)容。如果displayValue為空，則默認(rèn)顯示“0.0”。
- 按鈕操作處理程序（主要邏輯）：
代碼執(zhí)行幾個(gè)步驟來(lái)更新計(jì)算器的顯示并處理計(jì)算。首先，eval(displayValue) 計(jì)算存儲(chǔ)在displayValue 中的數(shù)學(xué)表達(dá)式。例如，如果顯示“3 5”，則 eval 計(jì)算并返回結(jié)果，在本例中為 8。
接下來(lái)，displayValue = String(result) 將結(jié)果轉(zhuǎn)換為字符串并更新displayValue 以在屏幕上顯示結(jié)果。計(jì)算完成后，lastOperator = "" 將lastOperator 重置為空字符串，確保清除任何先前的運(yùn)算符。最后，display()函數(shù)更新顯示以顯示計(jì)算結(jié)果。
- AC（全部清除）和 C（清除）按鈕邏輯
單擊“AC”按鈕時(shí)，代碼檢查buttonValue是否等于“AC”。如果為 true，它將把 displayValue 重置為空字符串，從而有效地清除整個(gè)顯示并重置計(jì)算器。然后調(diào)用 display() 函數(shù)以用空值更新顯示。
對(duì)于“C”按鈕，如果buttonValue是“C”，代碼使用slice(0, -1)從displayValue中刪除最后一個(gè)字符。這允許用戶刪除最后一個(gè)輸入或字符，并再次調(diào)用 display() 函數(shù)以相應(yīng)地更新顯示。
- 驗(yàn)證運(yùn)算符
此條件用于驗(yàn)證是否可以根據(jù)當(dāng)前顯示的值按下操作符。
條件 ["%", "/", "*", " "].includes(buttonValue) 檢查單擊的按鈕是否是運(yùn)算符之一 (%, /, *, )。如果該按鈕是一個(gè)運(yùn)算符，則下一步檢查 if (!displayValue || displayValue === "-") 確保在顯示為空或僅包含減號(hào) (-) 時(shí)無(wú)法按下該運(yùn)算符。這可以防止出現(xiàn)諸如具有兩個(gè)連續(xù)運(yùn)算符或以一個(gè)運(yùn)算符開(kāi)頭之類的錯(cuò)誤。如果條件為真，該函數(shù)將簡(jiǎn)單返回，并且不會(huì)將任何運(yùn)算符添加到顯示中。
- 防止連續(xù)運(yùn)算符
此代碼塊處理連續(xù)按下運(yùn)算符的情況，防止無(wú)效輸入，例如“ ”或“ -。”
首先，if (["%", "/", "*", " ", "-"].includes(buttonValue)) 檢查單擊的按鈕是否是運(yùn)算符。然后， const lastCharacter = displayValue.slice(-1) 檢索 displayValue 中當(dāng)前表達(dá)式的最后一個(gè)字符。
接下來(lái)，lastOperator = buttonValue 更新lastOperator 變量以存儲(chǔ)當(dāng)前操作符。如果最后一個(gè)字符也是一個(gè)運(yùn)算符（通過(guò) if (["%", "/", "*", " ", "-"].includes(lastCharacter)) 檢查），則代碼使用 displayValue.slice( 0, -1)。這可確保表達(dá)式末尾僅出現(xiàn)一個(gè)運(yùn)算符，并防止添加連續(xù)的運(yùn)算符。
- 驗(yàn)證小數(shù)點(diǎn)
此代碼塊確保小數(shù)點(diǎn) (.) 在數(shù)字中只能出現(xiàn)一次，從而防止像“3..5.”這樣的無(wú)效輸入
首先，條件 if (buttonValue === ".") 檢查單擊的按鈕是否為小數(shù)點(diǎn)。如果是，則繼續(xù)進(jìn)行驗(yàn)證。
接下來(lái)， const lastOperatorIndex = displayValue.lastIndexOf(lastOperator) 查找最后一個(gè)運(yùn)算符在 displayValue 中的位置。然后， const currentNumberSet = displayValue.slice(lastOperatorIndex) || displayValue 提取最后一個(gè)運(yùn)算符之后的 displayValue 部分，該部分表示當(dāng)前輸入的數(shù)字。如果沒(méi)有運(yùn)算符，則考慮整個(gè) displayValue。
最后，if (currentNumberSet.includes(".")) 檢查提取的數(shù)字部分是否已包含小數(shù)點(diǎn)。如果是這樣，函數(shù)會(huì)提前返回，從而防止用戶輸入第二個(gè)小數(shù)點(diǎn)。這可確?！?.5”等數(shù)字有效，但“3..5”等輸入無(wú)效。
- 用新值更新顯示：
代碼displayValue = displayValue buttonValue;將按下的按鈕的值（例如數(shù)字或運(yùn)算符）附加到現(xiàn)有的 displayValue 字符串。當(dāng)用戶與計(jì)算器交互時(shí)，這會(huì)構(gòu)建當(dāng)前表達(dá)式或數(shù)字。
附加按鈕值后，調(diào)用display()函數(shù)來(lái)更新顯示，確保它反映更新的displayValue。這可確保用戶在輸入時(shí)看到最新的值或表達(dá)式。
結(jié)論
此 JavaScript 代碼處理在計(jì)算器中顯示值、執(zhí)行計(jì)算、清除輸入和驗(yàn)證表達(dá)式的邏輯。它適用于按鈕點(diǎn)擊和鍵盤(pán)輸入。主要功能包括按下“=”或“Enter”鍵時(shí)執(zhí)行計(jì)算、處理AC（全部清除）和C（清除最后一個(gè)字符）按鈕，以及防止無(wú)效操作，例如連續(xù)運(yùn)算符或多個(gè)小數(shù)點(diǎn)。此外，每次操作后都會(huì)更新顯示，確保用戶看到最新的值或表達(dá)式。這些功能共同為功能性和交互式計(jì)算器奠定了基礎(chǔ)。
下面是我的演示鏈接，因此請(qǐng)隨意查看完整代碼、克隆存儲(chǔ)庫(kù)或與實(shí)時(shí)演示進(jìn)行交互。快樂(lè)編碼！
GITHUB - [https://github.com/bigyan1997/calculator]
VERCEL - [https://calculator-delta-sepia-91.vercel.app/]
以上是使用 HTML、CSS 和 JavaScript 創(chuàng)建基本計(jì)算器的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
熱門(mén)話題
為什么要將標(biāo)簽放在的底部？
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
如何在JS中與日期和時(shí)間合作？
Jul 01, 2025 am 01:27 AM
JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn)：1.創(chuàng)建Date對(duì)象有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時(shí)間信息可用get和set方法，注意月份從0開(kāi)始；3.手動(dòng)格式化日期需拼接字符串，也可使用第三方庫(kù)；4.處理時(shí)區(qū)問(wèn)題建議使用支持時(shí)區(qū)的庫(kù)，如Luxon。掌握這些要點(diǎn)能有效避免常見(jiàn)錯(cuò)誤。
什么是在DOM中冒泡和捕獲的事件？
Jul 02, 2025 am 01:19 AM
事件捕獲和冒泡是DOM中事件傳播的兩個(gè)階段，捕獲是從頂層向下到目標(biāo)元素，冒泡是從目標(biāo)元素向上傳播到頂層。1.事件捕獲通過(guò)addEventListener的useCapture參數(shù)設(shè)為true實(shí)現(xiàn)；2.事件冒泡是默認(rèn)行為，useCapture設(shè)為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委托，提高動(dòng)態(tài)內(nèi)容處理效率；5.捕獲可用于提前攔截事件，如日志記錄或錯(cuò)誤處理。了解這兩個(gè)階段有助于精確控制JavaScript響應(yīng)用戶操作的時(shí)機(jī)和方式。
如何減少JavaScript應(yīng)用程序的有效載荷大小？
Jun 26, 2025 am 12:54 AM
如果JavaScript應(yīng)用加載慢、性能差，問(wèn)題往往出在payload太大，解決方法包括：1.使用代碼拆分（CodeSplitting），通過(guò)React.lazy()或構(gòu)建工具將大bundle拆分為多個(gè)小文件，按需加載以減少首次下載量；2.移除未使用的代碼（TreeShaking），利用ES6模塊機(jī)制清除“死代碼”，確保引入的庫(kù)支持該特性；3.壓縮和合并資源文件，啟用Gzip/Brotli和Terser壓縮JS，合理合并文件并優(yōu)化靜態(tài)資源；4.替換重型依賴，選用輕量級(jí)庫(kù)如day.js、fetch
JavaScript模塊上的確定JS綜述：ES模塊與COMPORJS
Jul 02, 2025 am 01:28 AM
ES模塊和CommonJS的主要區(qū)別在于加載方式和使用場(chǎng)景。1.CommonJS是同步加載，適用于Node.js服務(wù)器端環(huán)境；2.ES模塊是異步加載，適用于瀏覽器等網(wǎng)絡(luò)環(huán)境；3.語(yǔ)法上，ES模塊使用import/export，且必須位于頂層作用域，而CommonJS使用require/module.exports，可在運(yùn)行時(shí)動(dòng)態(tài)調(diào)用；4.CommonJS廣泛用于舊版Node.js及依賴它的庫(kù)如Express，ES模塊則適用于現(xiàn)代前端框架和Node.jsv14 ；5.雖然可混合使用，但容易引發(fā)問(wèn)題
如何在node.js中提出HTTP請(qǐng)求？
Jul 13, 2025 am 02:18 AM
在Node.js中發(fā)起HTTP請(qǐng)求有三種常用方式：使用內(nèi)置模塊、axios和node-fetch。1.使用內(nèi)置的http/https模塊無(wú)需依賴，適合基礎(chǔ)場(chǎng)景，但需手動(dòng)處理數(shù)據(jù)拼接和錯(cuò)誤監(jiān)聽(tīng)，例如用https.get()獲取數(shù)據(jù)或通過(guò).write()發(fā)送POST請(qǐng)求；2.axios是基于Promise的第三方庫(kù)，語(yǔ)法簡(jiǎn)潔且功能強(qiáng)大，支持async/await、自動(dòng)JSON轉(zhuǎn)換、攔截器等，推薦用于簡(jiǎn)化異步請(qǐng)求操作；3.node-fetch提供類似瀏覽器fetch的風(fēng)格，基于Promise且語(yǔ)法簡(jiǎn)單
垃圾收集如何在JavaScript中起作用？
Jul 04, 2025 am 12:42 AM
JavaScript的垃圾回收機(jī)制通過(guò)標(biāo)記-清除算法自動(dòng)管理內(nèi)存，以減少內(nèi)存泄漏風(fēng)險(xiǎn)。引擎從根對(duì)象出發(fā)遍歷并標(biāo)記活躍對(duì)象，未被標(biāo)記的則被視為垃圾并被清除。例如，當(dāng)對(duì)象不再被引用（如將變量設(shè)為null），它將在下一輪回收中被釋放。常見(jiàn)的內(nèi)存泄漏原因包括：①未清除的定時(shí)器或事件監(jiān)聽(tīng)器；②閉包中對(duì)外部變量的引用；③全局變量持續(xù)持有大量數(shù)據(jù)。V8引擎通過(guò)分代回收、增量標(biāo)記、并行/并發(fā)回收等策略優(yōu)化回收效率，降低主線程阻塞時(shí)間。開(kāi)發(fā)時(shí)應(yīng)避免不必要的全局引用、及時(shí)解除對(duì)象關(guān)聯(lián)，以提升性能與穩(wěn)定性。
var vs Let vs const：快速JS綜述解釋器
Jul 02, 2025 am 01:18 AM
var、let和const的區(qū)別在于作用域、提升和重復(fù)聲明。1.var是函數(shù)作用域，存在變量提升，允許重復(fù)聲明；2.let是塊級(jí)作用域，存在暫時(shí)性死區(qū)，不允許重復(fù)聲明；3.const也是塊級(jí)作用域，必須立即賦值，不可重新賦值，但可修改引用類型的內(nèi)部值。優(yōu)先使用const，需改變變量時(shí)用let，避免使用var。
