各位开发者大家好！我很高兴分享我的最新项目：简单计算器。该项目是探索 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 文件提供了简单计算器的基本结构，包括显示区域和算术运算的按钮。这是一个片段：
Simple Calculator Simple Calculator
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中文网其他相关文章！
