在现代网页开发中，JavaScript 是一种不可或缺的编程语言。它不仅可以增强网页的交互性，还可以实现各种动态功能。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 制作一个简单的网页计算器。通过这个项目，你将学习到如何结合这三种技术来创建一个功能齐全的计算器。
我们将创建一个简单的四则运算计算器，支持加、减、乘、除操作。计算器的界面将使用 HTML 和 CSS 来构建，而计算逻辑则由 JavaScript 实现。最终的计算器将具备以下功能：
首先，我们需要创建一个基本的 HTML 结构来承载计算器的界面。我们将使用 <div> 元素来构建计算器的各个部分，包括显示屏和按钮。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单网页计算器</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="calculator"> <div class="display" id="display">0</div> <div class="buttons"> <button class="btn clear" onclick="clearDisplay()">C</button> <button class="btn delete" onclick="deleteLast()">DEL</button> <button class="btn operator" onclick="appendOperator('/')">/</button> <button class="btn operator" onclick="appendOperator('*')">*</button> <button class="btn number" onclick="appendNumber('7')">7</button> <button class="btn number" onclick="appendNumber('8')">8</button> <button class="btn number" onclick="appendNumber('9')">9</button> <button class="btn operator" onclick="appendOperator('-')">-</button> <button class="btn number" onclick="appendNumber('4')">4</button> <button class="btn number" onclick="appendNumber('5')">5</button> <button class="btn number" onclick="appendNumber('6')">6</button> <button class="btn operator" onclick="appendOperator('+')">+</button> <button class="btn number" onclick="appendNumber('1')">1</button> <button class="btn number" onclick="appendNumber('2')">2</button> <button class="btn number" onclick="appendNumber('3')">3</button> <button class="btn equal" onclick="calculate()">=</button> <button class="btn number zero" onclick="appendNumber('0')">0</button> <button class="btn number" onclick="appendNumber('.')">.</button> </div> </div> <script src="script.js"></script> </body> </html> 在这个 HTML 结构中，我们创建了一个包含显示屏和按钮的计算器。每个按钮都绑定了一个 onclick 事件，用于调用相应的 JavaScript 函数。
接下来，我们需要为计算器添加一些基本的样式，使其看起来更加美观和用户友好。我们将使用 CSS 来设置计算器的布局、颜色和字体。
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f4; font-family: Arial, sans-serif; } .calculator { width: 300px; background-color: #333; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; } .display { width: 100%; height: 60px; background-color: #222; color: #fff; font-size: 2.5em; text-align: right; padding: 10px; box-sizing: border-box; border-radius: 5px; margin-bottom: 20px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .btn { width: 100%; height: 60px; background-color: #444; color: #fff; font-size: 1.5em; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .btn:hover { background-color: #555; } .btn.operator { background-color: #ff9500; } .btn.operator:hover { background-color: #ffaa33; } .btn.equal { background-color: #34c759; grid-column: span 2; } .btn.equal:hover { background-color: #30d158; } .btn.clear { background-color: #ff3b30; } .btn.clear:hover { background-color: #ff5a4d; } .btn.delete { background-color: #5856d6; } .btn.delete:hover { background-color: #6a6aff; } .btn.zero { grid-column: span 2; } 在这个 CSS 文件中，我们设置了计算器的整体布局、按钮的样式以及不同按钮的颜色。我们还使用了 CSS Grid 来布局按钮，使其排列整齐。
最后，我们需要编写 JavaScript 代码来实现计算器的功能。我们将定义几个函数来处理数字输入、运算符选择、计算和清除操作。
let display = document.getElementById('display'); let currentInput = ''; let operator = null; let previousInput = ''; function appendNumber(number) { if (currentInput.includes('.') && number === '.') return; currentInput += number; updateDisplay(); } function appendOperator(op) { if (currentInput === '') return; if (previousInput !== '') { calculate(); } operator = op; previousInput = currentInput; currentInput = ''; } function calculate() { if (operator === null || currentInput === '') return; let result; const prev = parseFloat(previousInput); const current = parseFloat(currentInput); switch (operator) { case '+': result = prev + current; break; case '-': result = prev - current; break; case '*': result = prev * current; break; case '/': result = prev / current; break; default: return; } currentInput = result.toString(); operator = null; previousInput = ''; updateDisplay(); } function clearDisplay() { currentInput = ''; operator = null; previousInput = ''; updateDisplay(); } function deleteLast() { currentInput = currentInput.slice(0, -1); updateDisplay(); } function updateDisplay() { display.innerText = currentInput || '0'; } 在这个 JavaScript 文件中，我们定义了以下几个函数：
appendNumber(number)：将数字或小数点添加到当前输入中。appendOperator(op)：设置当前运算符，并保存之前的输入。calculate()：根据当前运算符和输入执行计算，并更新显示结果。clearDisplay()：清除所有输入和运算符。deleteLast()：删除当前输入的最后一个字符。updateDisplay()：更新显示屏的内容。完成上述代码后，你可以在浏览器中打开 HTML 文件来测试计算器的功能。确保所有按钮都能正常工作，并且计算结果准确无误。如果遇到问题，可以使用浏览器的开发者工具进行调试。
通过这个项目，我们学习了如何使用 HTML、CSS 和 JavaScript 创建一个简单的网页计算器。我们不仅掌握了基本的网页布局和样式设计，还学会了如何使用 JavaScript 处理用户输入和执行计算逻辑。这个项目为进一步学习更复杂的网页开发技术打下了坚实的基础。
希望这篇文章对你有所帮助，祝你在编程的道路上越走越远！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
