简单计算器
创作时间:
作者:
@小白创作中心
简单计算器
引用
CSDN
1.
https://blog.csdn.net/weixin_42581036/article/details/146253376
在现代生活中，计算器是我们日常工作和学习中不可或缺的工具。无论是进行简单的加减乘除运算，还是处理复杂的数学表达式，计算器都能帮助我们快速得到结果。本文将介绍如何使用HTML、CSS和JavaScript创建一个简单的网页计算器，并解释其实现原理。
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单计算器</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.calculator input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
font-size: 18px;
text-align: right;
border: 1px solid #ccc;
border-radius: 5px;
}
.calculator .buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.calculator .buttons button {
padding: 20px;
font-size: 18px;
border: none;
border-radius: 5px;
background-color: #f1f1f1;
cursor: pointer;
}
.calculator .buttons button:hover {
background-color: #ddd;
}
.calculator .buttons button.operator {
background-color: #ff9500;
color: white;
}
.calculator .buttons button.operator:hover {
background-color: #e08900;
}
.calculator .buttons button.equal {
background-color: #34c759;
color: white;
grid-column: span 2;
}
.calculator .buttons button.equal:hover {
background-color: #2da94f;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('/')" class="operator">/</button>
<button onclick="appendToDisplay('*')" class="operator">*</button>
<button onclick="deleteLast()">DEL</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('-')" class="operator">-</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('+')" class="operator">+</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="calculate()" class="equal">=</button>
<button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
<button onclick="appendToDisplay('.')">.</button>
</div>
</div>
<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function deleteLast() {
let display = document.getElementById('display');
display.value = display.value.slice(0, -1);
}
function calculate() {
let display = document.getElementById('display');
try {
// 使用 eval 计算表达式，支持运算符优先级
display.value = eval(display.value);
} catch (e) {
display.value = '错误';
}
}
</script>
</body>
</html>
项目结构
这个简单的计算器项目主要由三部分组成：
- HTML：用于构建计算器的基本结构和布局。
- CSS：用于美化计算器的外观，使其更加用户友好。
- JavaScript：用于实现计算器的逻辑功能，如输入、删除、清空和计算等。
HTML结构
HTML部分定义了计算器的基本结构。我们使用了一个 <div> 容器来包裹整个计算器，并在其中放置了一个输入框和一个按钮网格。
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('/')" class="operator">/</button>
<button onclick="appendToDisplay('*')" class="operator">*</button>
<button onclick="deleteLast()">DEL</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('-')" class="operator">-</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('+')" class="operator">+</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="calculate()" class="equal">=</button>
<button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
<button onclick="appendToDisplay('.')">.</button>
</div>
</div>
- 输入框：
<input type="text" id="display" disabled>用于显示用户输入和计算结果。disabled属性确保用户不能直接通过键盘输入。 - 按钮：每个按钮都绑定了
onclick事件，用于处理用户的点击操作。按钮分为数字按钮、运算符按钮和功能按钮（如清空、删除、等于）。
CSS样式
CSS部分用于美化计算器的外观。我们使用了Flexbox布局来使计算器在页面中居中显示，并使用Grid布局来排列按钮。
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.calculator input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
font-size: 18px;
text-align: right;
border: 1px solid #ccc;
border-radius: 5px;
}
.calculator .buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.calculator .buttons button {
padding: 20px;
font-size: 18px;
border: none;
border-radius: 5px;
background-color: #f1f1f1;
cursor: pointer;
}
.calculator .buttons button:hover {
background-color: #ddd;
}
.calculator .buttons button.operator {
background-color: #ff9500;
color: white;
}
.calculator .buttons button.operator:hover {
background-color: #e08900;
}
.calculator .buttons button.equal {
background-color: #34c759;
color: white;
grid-column: span 2;
}
.calculator .buttons button.equal:hover {
background-color: #2da94f;
}
- 居中显示：通过
display: flex和justify-content: center、align-items: center，我们将计算器居中显示在页面上。 - 按钮布局：使用
grid-template-columns: repeat(4, 1fr)将按钮排列成4列的网格布局。 - 按钮样式：不同类型的按钮（如运算符、等于按钮）有不同的背景颜色和悬停效果，以提高用户体验
JavaScript逻辑
JavaScript部分负责处理计算器的逻辑功能。我们定义了四个函数来实现计算器的基本操作：
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function deleteLast() {
let display = document.getElementById('display');
display.value = display.value.slice(0, -1);
}
function calculate() {
let display = document.getElementById('display');
try {
// 使用 eval 计算表达式，支持运算符优先级
display.value = eval(display.value);
} catch (e) {
display.value = '错误';
}
}
- appendToDisplay(value)：将用户点击的按钮值追加到输入框中。
- clearDisplay()：清空输入框中的内容。
- deleteLast()：删除输入框中的最后一个字符。
- calculate()：使用
eval()函数计算输入框中的表达式，并将结果显示在输入框中。如果表达式无效，则显示“错误”。
总结
通过这个简单的项目，我们学习了如何使用HTML、CSS和JavaScript创建一个功能齐全的网页计算器。这个计算器不仅支持基本的加减乘除运算，还具备清空、删除和错误处理功能。虽然这个计算器相对简单，但它为我们提供了一个良好的起点，可以在此基础上进一步扩展功能，如支持更复杂的数学运算、添加历史记录等。
希望这篇文章能帮助你理解如何构建一个简单的网页计算器，并激发你对前端开发的兴趣！
热门推荐
污水资源化利用：从“废水”到“再生水”的转变
云南临沧广邀天下客 沉浸式领略“有一种叫云南的生活”
成人要不要吃驱蛔虫药
3D打印外固定支具助力腕关节骨折恢复
家里装修时如何合理使用公积金？使用公积金进行装修需要注意什么？
公积金里面的钱可以装修用吗？合理利用资金提升家居品质
加密货币分析师表示，基于这些指标，比特币可能会以16万美元的价格冲刺
揭秘印度最高种姓“婆罗门”：出生即贵族，特权永享的奥秘
衣服的肩宽、胸围、衣长、袖长测量方法详解
辞职信的写作方法有哪些
无锡军嶂古道徒步详细路线
中远海运港口重要收购，找到出海新思路
门窗装修流程及最佳安装时间指南
《哪吒 2》中的中药彩蛋，你了解它们的神奇功效吗？
征地拆迁维权要怎么收集相关证据
不同颜色彼岸花的寓意与象征：从红色到黑色的神秘花语
考试心理：考生压力管理与情绪调节策略
挪威的社会福利制度
探测太空风云变幻 这一科技设施为何命名为“子午工程”？
差旅交通费如何合理报销与管理技巧分享
医生提醒：这5种疾病，多喝水就可以预防
如何理解和分析股票资金盘？这些资金盘的特点和风险如何评估？
海龟汤红汤黑汤分别是什么意思
Cell子刊：爱情会在大脑留下化学印记，而分开太久会导致这种印记消失
企业内部举报机制：网上如何有效举报公司违法行为
逍遥丸能和保和丸一起吃吗
Excel靠这招，从身份证号提取性别秒完成！
降血脂，营养专家建议多吃“紫色食物”
李怀光：以“带电吸附剂”突破碳捕集技术瓶颈
三国志战略版张角值得培养吗