简单计算器
创作时间:
作者:
@小白创作中心
简单计算器
引用
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创建一个功能齐全的网页计算器。这个计算器不仅支持基本的加减乘除运算，还具备清空、删除和错误处理功能。虽然这个计算器相对简单，但它为我们提供了一个良好的起点，可以在此基础上进一步扩展功能，如支持更复杂的数学运算、添加历史记录等。
希望这篇文章能帮助你理解如何构建一个简单的网页计算器，并激发你对前端开发的兴趣！
热门推荐
香草抹茶磅蛋糕，让你品味独特日式风味（教你如何制作香草抹茶磅蛋糕）
关节的基本结构包括哪三部分
2025年辣椒病虫害防治：专业解决方案与实践案例
如何查询自己的贷款信息？这种查询方法有哪些注意事项？
个人信用报告贷款信息全解析：从申请到审批的关键要点
仿绿松石价格图片，市场现状与购买建议
余大翠绿松石颜色选择指南：涵盖多款流行色系与搭配建议
毛坯房装修选材攻略，性价比高的材料这样挑
笔迹鉴定是哪个部门作的？
耳塞哪里有卖？耳塞怎么选择合适的？
便秘怎么办？四种实用的快速排便方法
八字命理：五行火太旺的表现
出站即求职，北京西站专场招聘会提供岗位3000余个
向日葵收获季节剖析（了解向日葵的生长周期和收获时间，让你种出丰收的好果子）
向日葵什么时候种植？向日葵种植最佳时间是什么时候？
芹菜配什么菜最好吃？教你8种做法，爽脆可口超下饭，家人都爱吃
如何解决自然语言处理中的语义理解问题？
法院判例：用人单位单方面调岗降薪被判违法，需支付赔偿金
企业如何向员工提出离职补偿？这份指南请收好
泡菜发酵微生物学和工艺参数
泡菜检测执行的国家标准是什么？
股市大盘点数的变化规律是什么？这种变化规律如何预测？
废弃电路板的回收利用：变废为宝的绿色途径
产品经理如何选赛道和项目
玉米期货技术分析表格详解：从K线图到布林带的全方位解析
【漫话健康】涨“碘”知识，健康同行！
民间故事：“囍”字的由来
囍在中国传统文化中的象征意义
葫芦岛旅游攻略：景点介绍与交通指南
如何使用开发者工具提升编程效率？