简单计算器
创作时间:
作者:
@小白创作中心
简单计算器
引用
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创建一个功能齐全的网页计算器。这个计算器不仅支持基本的加减乘除运算，还具备清空、删除和错误处理功能。虽然这个计算器相对简单，但它为我们提供了一个良好的起点，可以在此基础上进一步扩展功能，如支持更复杂的数学运算、添加历史记录等。
希望这篇文章能帮助你理解如何构建一个简单的网页计算器，并激发你对前端开发的兴趣！
热门推荐
时装设计师如何应对高强度的工作压力
重庆西站停车指南：收费标准与省钱攻略
“太阳花”马齿苋：不仅可以当盆栽，还有珍贵价值，正适合夏季
这些奔走的小金龙，竟是唐代“许愿神器”？
6 种促进肌肉生长的优质蛋白
长安：历史与现代交融的文化象征之城
批判性写作指南：如何运用辩证思维提升文章质量？
网上买的高铁票需要取纸质车票吗？
秋豆角什么时间种最好？
交通事故案例解读：电动车顺行碰撞逆行行人被定责，原因竟是超速
6种低钠食物及其对心脏健康的益处
动感单车伤膝盖还是跑步伤膝盖
今天可以个税退税了，哪些人会退税，怎么退？
怎么问孩子的成绩情况？孩子厌学不去学校了家长怎么引导
10首绝美诗词，每一句诗都是一幅画，诗情画意，美到极致
马齿苋是什么季节的蔬菜？生长在什么地方？从种植到食用全解析
斜抛运动原理与应用详解
“绿色癌症”——溃疡性结肠炎
年货采购省钱攻略，想吃饺子不用买速冻，自己做就行，健康又好吃
立春过后，记得尝鲜，多吃6种应季蔬菜，不反季节，营养高味道佳
红色文化与旅游产业的融合发展 为县域经济注入新活力
UML之序列图详解
软件架构图详解：组件、容器与模块架构图的用途与实例
DeepSeek如何鼓励跨学科的创新合作与交流
骑电瓶车被车撞了误工费赔偿标准是多少
热灸膏的正确使用方法
ctDNA甲基化检测极具临床应用价值
什么是判决
企业安全文化建设指南：从理念到实践的全方位解析
如何制定团队奖项名称