2023-12-20 03:47:36
用 HTML、CSS 和 JavaScript 构建一个简易计算器
在现代网络开发中，创建交互式且功能强大的网页至关重要。HTML 、CSS 和 JavaScript 携手为构建复杂而迷人的用户界面提供了坚实的基础。本文旨在指导您使用这三种语言创建一个简单的计算器，展示这些技术的力量和相互协作。
HTML（超文本标记语言）是用于创建网页结构和内容的基石。对于我们的计算器，我们将使用以下 HTML 代码：
<!DOCTYPE html> <html> <head> </head> <body> <h1>简易计算器</h1> <div id="display"></div> <div class="buttons"> <button id="one">1</button> <button id="two">2</button> <button id="three">3</button> <!-- 省略其他数字和运算符按钮 --> </div> </body> </html>
此代码创建了一个基本结构，其中包含一个标题（
CSS（层叠样式表）负责网页的外观和布局。它让我们可以自定义颜色、字体、大小和其他视觉方面。以下 CSS 代码将为我们的计算器增添一些风格：
body { font-family: Arial, sans-serif; font-size: 14px; } h1 { text-align: center; color: #333; } #display { width: 250px; height: 50px; background-color: #f0f0f0; border: 1px solid #ccc; text-align: right; font-size: 20px; } .buttons { display: flex; flex-wrap: wrap; justify-content: center; } button { width: 50px; height: 50px; margin: 5px; background-color: #eee; border: 1px solid #ccc; font-size: 16px; }
JavaScript 是 HTML 和 CSS 的动态搭档，它允许我们添加交互性并响应用户输入。以下 JavaScript 代码将使我们的计算器栩栩如生：
const display = document.getElementById('display'); const buttons = document.querySelectorAll('.buttons button'); let firstNumber = ''; let secondNumber = ''; let operator = ''; const add = (a, b) => a + b; const subtract = (a, b) => a - b; const multiply = (a, b) => a * b; const divide = (a, b) => a / b; const operate = (a, b, operator) => { switch (operator) { case '+': return add(a, b); case '-': return subtract(a, b); case '*': return multiply(a, b); case '/': return divide(a, b); } }; buttons.forEach(button => { button.addEventListener('click', () => { const value = button.textContent; if (['+', '-', '*', '/'].includes(value)) { operator = value; firstNumber = display.textContent; display.textContent = ''; } else if (value === '.' && !display.textContent.includes('.')) { display.textContent += value; } else if (value === '=' && firstNumber && secondNumber) { secondNumber = display.textContent; display.textContent = operate(Number(firstNumber), Number(secondNumber), operator); } else { display.textContent += value; } }); });
此 JavaScript 代码执行以下操作：
现在您已经创建了这个简易计算器，是时候使用它了。输入数字，选择运算符，然后单击“=”按钮查看结果。例如，要计算 5 + 7，您将执行以下步骤：
计算器将显示结果 12。
1. 如何在计算器中添加更多运算符？
在 JavaScript 的 operate 函数中添加新的 case 语句，并为新运算符编写相应的计算函数。
2. 如何处理负数？
修改 JavaScript 代码以在处理数字时将前导负号视为有效输入。
3. 如何限制显示屏上的数字长度？
在 JavaScript 代码中添加一个检查，以确保显示屏上的数字长度不超过预定义限制。
4. 如何使用键盘输入？
为按钮添加键盘事件侦听器，并在用户按下相应的数字或运算符键时触发这些事件。
5. 如何自定义计算器的外观？
通过编辑 CSS 代码可以轻松自定义计算器的外观，包括字体、颜色、按钮大小等。
使用 HTML、CSS 和 JavaScript 构建一个简易计算器不仅是一个有益的学习练习，还展示了这些技术如何协同工作以创建交互式和功能强大的网页。通过了解如何使用这些语言，您可以解锁无限的可能性，创建引人入胜的数字体验。
探索Web开发资源和人工智能教程的代码社区
