简单计算器
创作时间:
作者:
@小白创作中心
简单计算器
引用
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创建一个功能齐全的网页计算器。这个计算器不仅支持基本的加减乘除运算，还具备清空、删除和错误处理功能。虽然这个计算器相对简单，但它为我们提供了一个良好的起点，可以在此基础上进一步扩展功能，如支持更复杂的数学运算、添加历史记录等。
希望这篇文章能帮助你理解如何构建一个简单的网页计算器，并激发你对前端开发的兴趣！
热门推荐
雕阑玉砌应犹在，只是朱颜改。
油漆稀释剂使用注意事项
全球最具影响力的10部高分美剧，哪部为你的入坑之作？
壁上丹青耀新辉——敦煌壁画对现当代工笔人物画的毓养
“七星连珠”将现天宇 千年一遇引关注
医生解答：孕妇分娩后可以使用痔疮栓吗？
重磅！欧盟正式通过食品接触材料的双酚A（BPA）禁令！
律师解析：解除劳动合同的正确格式与赔偿金计算
客家人“过房”的习俗！你知道么？
“坏心的”川崎病 | 贤医健康说
中年以后，五官逐渐变得更耐看的6种生活习惯，你做到了吗？
珠海圆明新园：南中国唯一的皇家园林
资产的定义及属性
等离子体概述
房屋预售合同查询：法律实务与操作指南
电机驱动开发之驱动板设计详解
经常熬夜脸色暗黄怎么调理
内容运营：如何为品牌打造高质量的内容策略
浙江舟山：向海而兴，打造“蓝色”增长极
40个发明原理：快速通过原理
泡菜可以放多久？这些保存技巧让你的泡菜更持久
如何完全使用C语言开发安卓应用
在家享受美味烧烤的秘诀 从食材到技巧全都有
经常跑长途买什么车最合适？SUV适合长途自驾吗？说说你的见解！
青春養顏！一篇搞懂大馬士革玫瑰精油功效與推薦用法
专升本学历社会认可度如何？对就业率有影响吗？
揭秘：含铜稀有宝石——海纹石的独特魅力！
二战时期，德国的仆从国里，哪个国家的军事实力最强？
形容下雪的诗句有哪些？诗意冬日：精选描写雪景的绝美诗句!
宇宙巨无霸！史蒂文森2-18：恒星之王的奥秘与影响