当前位置：首页 > news >正文

风尚云网前端学习：制作一款简易的在线计算器

news 2026/2/8 17:37:08

风尚云网前端学习：制作一款简易的在线计算器

简介

在前端开发的学习过程中，实现一个简单的在线计算器是一个常见的练习项目。它不仅能够帮助我们熟悉HTML、CSS和JavaScript的基本用法，还能够加深我们对事件处理和DOM操作的理解。今天，我们将一起学习如何创建一款简易的在线计算器，并探索其背后的代码实现。在这里插入图片描述

项目结构

我们的计算器项目包含三个主要部分：HTML结构、CSS样式和JavaScript逻辑。

HTML结构

HTML部分负责构建计算器的界面。我们使用<div>元素来创建计算器的容器，<input>元素作为显示屏，以及一系列<button>元素作为数字和运算符的按钮。

<div class="calculator"><p>风尚云网前端学习：<br>一款简易的在线计算器</p><input type="text" id="display" class="display" readonly><div class="button-grid"><!-- 按钮 --></div>
</div>

CSS样式

CSS部分负责计算器的样式设计。我们使用了Flexbox布局来居中显示计算器，并为按钮和显示屏添加了一些基本的样式，使其看起来更加美观。

body {font-family: 'Arial', sans-serif;background-color: #ececec;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;
}.calculator {background-color: #ffffff;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);overflow: hidden;width: 240px;max-width: 100%;padding: 20px;
}.display {background-color: #f7f7f7;color: #333;font-size: 1.2em;padding: 15px;text-align: right;border: none;outline: none;width: 100%;box-sizing: border-box;margin-bottom: 15px;
}.button-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;
}.button {background-color: #e0e0e0;border: none;border-radius: 5px;color: #333;cursor: pointer;font-size: 1em;padding: 15px;text-align: center;transition: background-color 0.3s ease;
}/* 更多样式... */

JavaScript逻辑

JavaScript部分负责计算器的逻辑处理。我们为每个按钮添加了事件监听器，以便在点击时执行相应的操作。这包括数字输入、运算符选择、计算结果和清除操作。

const display = document.getElementById('display');
let currentInput = '';
let previousInput = '';
let operation = null;const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {button.addEventListener('click', () => {const value = button.textContent;if (value === 'C') {currentInput = '';previousInput = '';operation = null;display.value = '';} else if (value === '=') {if (previousInput !== '' && operation !== null && currentInput !== '') {calculateResult();}} else if (['+', '-', '×', '÷'].includes(value)) {if (currentInput !== '') {if (operation) {calculateResult();}previousInput = parseFloat(currentInput);currentInput = '';operation = value;}} else if (value === '.') {if (!currentInput.includes('.')) {currentInput += value;}} else {currentInput += value;}display.value = currentInput || previousInput || '';});
});function calculateResult() {let result;const num1 = parseFloat(previousInput);const num2 = parseFloat(currentInput);switch (operation) {case '+':result = num1 + num2;break;case '-':result = num1 - num2;break;case '×':result = num1 * num2;break;case '÷':if (num2 === 0) {alert('除数不能为0');return;}result = num1 / num2;break;}display.value = result;currentInput = result.toString();previousInput = '';operation = null;
}

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 使页面在移动设备上正常显示 --><title>基本计算器</title> <!-- 页面标题 --><style>/* CSS样式开始 */body {font-family: 'Arial', sans-serif; /* 设置字体 */background-color: #ececec; /* 设置背景颜色 */display: flex; /* 使用Flexbox布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 高度设置为视口高度 */margin: 0; /* 移除默认边距 */}.calculator {background-color: #ffffff; /* 计算器背景颜色 */border-radius: 10px; /* 边框圆角 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */overflow: hidden; /* 隐藏溢出内容 */width: 240px; /* 计算器宽度 */max-width: 100%; /* 最大宽度为100% */padding: 20px; /* 内边距 */}.display {background-color: #f7f7f7; /* 显示屏背景颜色 */color: #333; /* 文字颜色 */font-size: 1.2em; /* 字体大小 */padding: 15px; /* 内边距 */text-align: right; /* 文本右对齐 */border: none; /* 无边框 */outline: none; /* 无轮廓 */width: 100%; /* 宽度100% */box-sizing: border-box; /* 盒模型 */margin-bottom: 15px; /* 外边距 */}.button-grid {display: grid; /* 使用网格布局 */grid-template-columns: repeat(4, 1fr); /* 四列 */gap: 10px; /* 间隔 */}.button {background-color: #e0e0e0; /* 按钮背景颜色 */border: none; /* 无边框 */border-radius: 5px; /* 边框圆角 */color: #333; /* 文字颜色 */cursor: pointer; /* 鼠标指针 */font-size: 1em; /* 字体大小 */padding: 15px; /* 内边距 */text-align: center; /* 文本居中 */transition: background-color 0.3s ease; /* 背景色渐变 */}.button:hover {background-color: #d5d5d5; /* 鼠标悬停背景颜色 */}.button:active {background-color: #cccccc; /* 鼠标按下背景颜色 */}.operator {background-color: #000; /* 操作符按钮背景颜色 */color: #fff; /* 文字颜色 */}.operator:hover {background-color: #f57c00; /* 鼠标悬停背景颜色 */}.operator:active {background-color: #ef6c00; /* 鼠标按下背景颜色 */}.equals {background-color: #000; /* 等号按钮背景颜色 */color: #fff; /* 文字颜色 */}.equals:hover {background-color: #45a049; /* 鼠标悬停背景颜色 */}.equals:active {background-color: #3e8e41; /* 鼠标按下背景颜色 */}/* CSS样式结束 */</style>
</head>
<body>
<div class="calculator"><!-- 标题和副标题 --><p>风尚云网前端学习：<br>一款简易的在线计算器</p><!-- 显示屏 --><input type="text" id="display" class="display" readonly><!-- 按钮网格 --><div class="button-grid"><!-- 清除按钮 --><button class="button clear">C</button><!-- 数字按钮 --><button class="button number">1</button><button class="button number">2</button><button class="button number">3</button><button class="button number">4</button><button class="button number">5</button><button class="button number">6</button><button class="button number">7</button><button class="button number">8</button><button class="button number">9</button><button class="button number">0</button><!-- 小数点按钮 --><button class="button decimal">.</button><!-- 操作符按钮 --><button class="button operator">+</button><button class="button operator">-</button><button class="button operator">×</button><button class="button operator">÷</button><!-- 等号按钮 --><button class="button equals">=</button></div>
</div><script>// 获取显示屏元素const display = document.getElementById('display');// 用于存储当前输入的数字let currentInput = '';// 用于存储之前的数字let previousInput = '';// 用于存储操作符let operation = null;// 获取所有按钮const buttons = document.querySelectorAll('.button');// 为每个按钮添加点击事件buttons.forEach(button => {button.addEventListener('click', () => {const value = button.textContent;// 处理清除按钮if (value === 'C') {currentInput = '';previousInput = '';operation = null;display.value = '';} else if (value === '=') {// 处理等号按钮，计算结果if (previousInput !== '' && operation !== null && currentInput !== '') {calculateResult();}} else if (['+', '-', '×', '÷'].includes(value)) {// 处理操作符按钮if (currentInput !== '') {if (operation) {calculateResult();}previousInput = parseFloat(currentInput);currentInput = '';operation = value;}} else if (value === '.') {// 处理小数点按钮if (!currentInput.includes('.')) {currentInput += value;}} else {// 处理数字按钮currentInput += value;}// 更新显示屏display.value = currentInput || previousInput || '';});});// 计算结果的函数function calculateResult() {let result;const num1 = parseFloat(previousInput);const num2 = parseFloat(currentInput);// 根据操作符计算结果switch (operation) {case '+':result = num1 + num2;break;case '-':result = num1 - num2;break;case '×':result = num1 * num2;break;case '÷':if (num2 === 0) {alert('除数不能为0');return;}result = num1 / num2;break;}// 显示结果display.value = result;// 重置输入currentInput = result.toString();previousInput = '';operation = null;}
</script></body>
</html>

结论

通过本教程，我们学习了如何创建一个简易的在线计算器。这个项目不仅锻炼了我们的前端技能，还帮助我们理解了事件驱动编程的基本概念。希望这个教程能够帮助你更好地理解HTML、CSS和JavaScript的实际应用，并激发你创建自己的网页项目。

注意：在实际部署时，请确保所有的资源文件（如CSS和JavaScript）都已正确链接，以便计算器能够正常工作。如果你在实现过程中遇到任何问题，欢迎在评论区提问或寻求帮助。