各位開發者大家好!我很高興分享我的最新項目:簡單計算器。該專案是探索 JavaScript 基礎知識的完美方式,特別是在處理數學運算、動態更新 DOM 和建立互動式使用者介面方面。無論您是 Web 開發新手還是希望提升 JavaScript 技能,這個簡單計算器專案都是一個很好的起點。
簡單計算器是一個基於網路的應用程序,允許使用者執行基本算術運算,如加法、減法、乘法和除法。此專案重點介紹如何創建響應靈敏且用戶友好的介面,同時有效處理用戶輸入以執行計算。
以下是專案結構的快速瀏覽:
Simple-Calculator/ ├── index.html ├── styles.css └── script.js
要開始該項目,請按照以下步驟操作:
複製儲存庫:
git clone https://github.com/abhishekgurjar-in/Simple-Calculator.git
開啟專案目錄:
cd Simple-Calculator
運行項目:
index.html 檔案提供了簡單計算器的基本結構,包括顯示區域和算術運算的按鈕。這是一個片段:
8b05045a5be5764f313ed5b9168a17e6 49099650ebdc5f3125501fa170048923 93f0f5c25f18dab9d176bd4f6de5d30e 7c8d9f814bcad6a1d7abe4eda5f773e5 26faf3d1af674280d03ba217d87e9421 b2386ffb911b14667cb8f0f91ea547a7Simple Calculator6e916e0f7d1e588d4f442bf645aedb2f af75c476cdb7e6c074ca6da9b40841de 90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 924ff17625d603f964501dd897c96cc6 4a249f0d628e2318394fd9b75b4636b1Simple Calculator473f0a7621bec819994bb5020d29372a 16b28748ea4df4d9c2150843fecfba68 4883ec0eb33c31828b7c767c806e14c7 484fa028d8c6f85de53c7938dec280ce 81304ad60882cdf6a4703237057e689b dc6dce4a544fdca2df29d5ac0ea9906b 88c70033a81354858c2d5d5f8799f2d2AC65281c5ac262bf6d81768915a4a77ac0 88c70033a81354858c2d5d5f8799f2d2DEL65281c5ac262bf6d81768915a4a77ac0 88c70033a81354858c2d5d5f8799f2d2%65281c5ac262bf6d81768915a4a77ac0 88c70033a81354858c2d5d5f8799f2d2/65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 dc6dce4a544fdca2df29d5ac0ea9906b 7a766ea05486930017614b5a53f01815765281c5ac262bf6d81768915a4a77ac0 7a766ea05486930017614b5a53f01815865281c5ac262bf6d81768915a4a77ac0 7a766ea05486930017614b5a53f01815965281c5ac262bf6d81768915a4a77ac0 88c70033a81354858c2d5d5f8799f2d2*65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 dc6dce4a544fdca2df29d5ac0ea9906b 7a766ea05486930017614b5a53f01815465281c5ac262bf6d81768915a4a77ac0 7a766ea05486930017614b5a53f01815565281c5ac262bf6d81768915a4a77ac0 7a766ea05486930017614b5a53f01815665281c5ac262bf6d81768915a4a77ac0 88c70033a81354858c2d5d5f8799f2d2-65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 dc6dce4a544fdca2df29d5ac0ea9906b 7a766ea05486930017614b5a53f01815165281c5ac262bf6d81768915a4a77ac0 7a766ea05486930017614b5a53f01815265281c5ac262bf6d81768915a4a77ac0 7a766ea05486930017614b5a53f01815365281c5ac262bf6d81768915a4a77ac0 88c70033a81354858c2d5d5f8799f2d2+65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 dc6dce4a544fdca2df29d5ac0ea9906b 7a766ea05486930017614b5a53f018150065281c5ac262bf6d81768915a4a77ac0 7a766ea05486930017614b5a53f01815065281c5ac262bf6d81768915a4a77ac0 7a766ea05486930017614b5a53f01815.65281c5ac262bf6d81768915a4a77ac0 7c8d25676e5efa114cb91329eb362165=65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 ffd6ba4147bda351239915f463e46e38 e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
styles.css 檔案設定簡單計算器的樣式,提供現代且使用者友好的佈局。以下是一些關鍵樣式:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { width: 100%; height: 100vh; display: flex; justify-content: center; flex-direction: column; align-items: center; background: linear-gradient(45deg, #0a0a0a, #3a4452); } .header { color: white; margin: 30px; text-align: center; } .calculator { border: 1px solid #717377; padding: 20px; border-radius: 16px; background: transparent; box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5); } input { width: 320px; border: none; padding: 24px; margin: 10px; background: transparent; box-shadow: 0px 3px 15px rgba(84, 84, 84, 0.1); font-size: 40px; text-align: right; cursor: pointer; color: #ffffff; } input::placeholder { color: #ffffff; } button { border: none; width: 60px; height: 60px; margin: 10px; border-radius: 50%; background: transparent; color: #ffffff; font-size: 20px; box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1); cursor: pointer; } .equalBtn { background-color: #fb7c14; } .operator { color: #6dee0a; } .footer { color: white; margin: 50px; text-align: center; }
script.js 檔案管理執行計算和處理使用者互動的邏輯。這是一個片段:
let input = document.getElementById("inputBox"); let buttons = document.querySelectorAll("button"); let string = ""; let arr = Array.from(buttons); arr.forEach((button) => { button.addEventListener("click", (e) => { if (e.target.innerHTML === "=") { string = eval(string); input.value = string; } else if (e.target.innerHTML === "AC") { string = ""; input.value = string; } else if (e.target.innerHTML === "DEL") { string = string.substring(0, string.length - 1); input.value = string; } else { string += e.target.innerHTML; input.value = string; } }); });
您可以在此處查看簡單計算器的現場示範。
創建這個簡單的計算器是一次有益的經歷,它加深了我對 JavaScript 以及如何建立互動式 Web 應用程式的理解。我希望這個專案能夠鼓勵您嘗試自己的 JavaScript 專案。快樂編碼!
這個專案是我增強 Web 開發技能之旅的一部分,專注於 JavaScript 和使用者互動。
以上是建立一個簡單的計算器網站的詳細內容。更多資訊請關注PHP中文網其他相關文章!