简单计算器
创作时间:
作者:
@小白创作中心
简单计算器
引用
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创建一个功能齐全的网页计算器。这个计算器不仅支持基本的加减乘除运算，还具备清空、删除和错误处理功能。虽然这个计算器相对简单，但它为我们提供了一个良好的起点，可以在此基础上进一步扩展功能，如支持更复杂的数学运算、添加历史记录等。
希望这篇文章能帮助你理解如何构建一个简单的网页计算器，并激发你对前端开发的兴趣！
热门推荐
四川苍溪：亭子湖畔兴起水上旅游，带动湖区乡村振兴
故宫和颐和园的必买纪念品清单
社科院高级课程班结业证成职场人进阶利器
大众车主必看：P173600故障码快速修复攻略
冬季汽车故障高发，帕萨特P173600怎么办？
大众DQ380变速箱故障码173600：原因、症状及维修指南
不是崇洋媚外，日式住宅这7个神设计看完令人不得不服，太厉害了
林屋洞：太湖西山上的道教洞天与龙王宫殿
春运返程高峰，广州南站六种交通方式换乘攻略
北京穷游攻略：如何省钱玩转帝都？
三神合一：揭秘修行的最高境界
个税专项扣除今起确认，7类项目标准详解
企业税收筹划指南：10大方法应对金税四期严监管
6-8月龄是猫咪绝育黄金期，营养补充是关键
贴对联的时间、方位、颜色全解析：让年味更地道
春联里的东亚文化：中韩越日新年习俗大不同
家庭防火必备：“提拔握压”灭火神器
家庭防火新选择：告别干粉，拥抱智能
儿童常见疾病早期识别与家庭护理要点
秋季儿童传染病高发，专家详解五大疾病预防要点
赤狐的冬日生存智慧：从换毛到磁场捕猎
税务筹划让企业节税增效，苹果公司避税案透视国际税务规则
故宫打卡攻略：北京历史文化景点消费指南
北京环球影城代订陷阱揭秘：低价背后的风险
北京旅游费用飙升，这些因素不容忽视
高温季节钓鲫难？试试这个奶香饵料配方
水草减少影响鲫鱼繁殖，生态修复守护湿地家园
夏季钓鱼攻略：早晚为宜，深浅有别，五招提升渔获
这是金秋的极致浪漫！河南银杏观赏指南来了
走，去信阳 | 行走在古巷，感受这里的慢生活