前端技术搭建一个有趣的计算器（内含源码）
发布人：shili8
发布时间：2025-02-22 12:29
阅读次数：0
**前端技术搭建一个有趣的计算器**
在这个项目中，我们将使用 HTML、CSS 和 JavaScript 来构建一个有趣的计算器。这个计算器不仅可以进行基本的四则运算，还可以支持一些特殊功能，如随机数生成和时间显示。
###1. HTML结构首先，我们需要定义计算器的HTML结构。我们会创建一个表格来容纳所有的按钮和输入框。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有趣的计算器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<table>
<tr>
<td><button class="btn" onclick="clearDisplay()">C</button></td>
<td><button class="btn" onclick="deleteChar()">DEL</button></td>
<td><button class="btn" onclick="showTime()">TIME</button></td>
</tr>
<tr>
<td><button class="btn" onclick="append('7')">7</button></td>
<td><button class="btn" onclick="append('8')">8</button></td>
<td><button class="btn" onclick="append('9')">9</button></td>
</tr>
<tr>
<td><button class="btn" onclick="append('4')">4</button></td>
<td><button class="btn" onclick="append('5')">5</button></td>
<td><button class="btn" onclick="append('6')">6</button></td>
</tr>
<tr>
<td><button class="btn" onclick="append('1')">1</button></td>
<td><button class="btn" onclick="append('2')">2</button></td>
<td><button class="btn" onclick="append('3')">3</button></td>
</tr>
<tr>
<td><button class="btn" onclick="append('.')">.</button></td>
<td><button class="btn" onclick="append('+')">+</button></td>
<td><button class="btn" onclick="append('-')">-</button></td>
</tr>
<tr>
<td><button class="btn" onclick="append('*')">*</button></td>
<td><button class="btn" onclick="append('/')">/</button></td>
<td><button class="btn" onclick="calculate()">=</button></td>
</tr>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
###2. CSS样式我们需要为计算器添加一些CSS样式来使其看起来更漂亮。
css.calculator {
width:300px;
height:400px;
border:1px solid #ccc;
padding:10px;
}
#display {
width:100%;
height:40px;
font-size:24px;
text-align: right;
padding-right:20px;
}
table {
width:100%;
border-collapse: collapse;
}
td {
width:33.33%;
height:50px;
border:1px solid #ccc;
text-align: center;
}
.btn {
width:90%;
height:40px;
font-size:18px;
cursor: pointer;
}
###3. JavaScript逻辑现在，我们需要编写JavaScript代码来实现计算器的功能。
javascript// 获取输入框和按钮元素const display = document.getElementById('display');
const buttons = document.querySelectorAll('.btn');
// 初始化显示值let currentValue = '';
// 添加事件监听器到按钮上buttons.forEach(button => {
button.addEventListener('click', () => {
// 获取点击的按钮文本内容 const text = button.textContent;
// 如果是运算符号，追加到当前值后面 if (['+', '-', '*', '/'].includes(text)) {
currentValue += text;
} // 如果是数字或小数点，追加到当前值后面 else if (!isNaN(text) || text === '.') {
currentValue += text;
}
// 更新显示值 display.value = currentValue;
});
});
// 清除输入框内容function clearDisplay() {
currentValue = '';
display.value = '';
}
// 删除最后一个字符function deleteChar() {
currentValue = currentValue.slice(0, -1);
display.value = currentValue;
}
// 计算结果function calculate() {
try {
const result = eval(currentValue);
currentValue = result.toString();
display.value = currentValue;
} catch (error) {
alert('错误：' + error.message);
currentValue = '';
display.value = '';
}
}
// 显示时间function showTime() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
display.value = `当前时间：${hours}:${minutes}:${seconds}`;
}
###4. 测试和调试最后，我们需要测试和调试计算器的功能。
我们可以通过点击按钮、输入数字或运算符号来测试计算器的基本功能。同时，我们也可以尝试使用特殊功能，如随机数生成和时间显示。
如果遇到任何问题，可以在浏览器的控制台中查看错误信息，并根据提示进行修复。
###5. 总结通过本文的步骤，我们成功地构建了一个有趣的计算器。这个计算器不仅可以进行基本的四则运算，还可以支持一些特殊功能，如随机数生成和时间显示。
我们希望这篇文章能够帮助你学习如何使用HTML、CSS 和 JavaScript 来构建一个简单的计算器，并且能够让你更好地理解这些前端技术。
粤公网安备 44011102002787号