前端技术搭建一个有趣的计算器（内含源码）
The sand accumulates to form a pagoda
- ✨ 写在前面
- ✨ 功能介绍
- ✨ 页面搭建
- ✨ 样式设置
- ✨ 逻辑部分
✨ 写在前面
上周我们实通过前端基础实现了五子棋游戏，今天还是继续按照我们原定的节奏来带领大家完成一个有趣的计算器，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用， 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，这份专栏中我们会带领大家用前端实现翻卡片、飞机大战、弹珠游戏、贪吃蛇、井字游戏、拼图、连连看、扫雷等等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。订阅链接：https://blog.csdn.net/jhxl_/category_12261013.html
✨ 功能介绍
这个计算器具有以下使用方法和功能：
显示屏: 计算结果会显示在屏幕上方的显示屏中，初始值为0。数字按钮: 点击数字按钮可以输入相应的数字。例如，点击"7"按钮会将数字7添加到表达式中，并在显示屏上更新为"7"。运算符按钮: 点击运算符按钮可以输入相应的运算符。例如，点击"+"按钮会将加号运算符添加到表达式中，并在显示屏上更新为当前表达式。
清除按钮: 点击"C"按钮可以清除当前表达式并将显示屏重置为初始值"0"。百分比运算: 点击"%“按钮可以将当前数值转换为百分比形式。例如，如果当前表达式为"100”，点击"%“后，表达式会变成"100%”。功德按钮: 点击"功德"按钮会弹出一个提示框，显示信息“功德+1”。等号按钮: 点击等号(“=”)按钮会计算当前表达式的结果，并将结果显示在显示屏上。如果表达式无法计算或者包含非法字符，则显示屏会显示错误信息。错误处理: 如果计算过程中发生错误（例如除以零），则在显示屏上显示错误信息，并清空当前表达式。
✨ 页面搭建
创建文件
首先呢我们创建我们的HTML文件，这里我就直接命名为 计算器.html 了，大家可以随意命名， 文件创建生成后我们通过编辑器打开，这里我用的是VScode， 然后初始化我们的代码结构，那在这里告诉大家一个快捷键，就是我们敲上我们英文的一个 ! 我们敲击回车直接就会给我们生成基础版本的前端代码结构。
文档声明和编码设置： 在HTML文档的头部，使用声明HTML文档类型，确保浏览器以正确的方式渲染网页内容。同时，设置UTF-8编码，以确保浏览器能够正确地解析和显示中文字符。下面我就开始搭建我们的DOM结构了！
DOM结构搭建
<body>
<div class="calculator">
<div class="display" id="display">0div>
<div class="buttons">
<button onclick="appendNumber(7)">7button>
<button onclick="appendNumber(8)">8button>
<button onclick="appendNumber(9)">9button>
<button onclick="clearDisplay()" class="clear">Cbutton>
<button onclick="appendOperator('%')" class="operator">%button>
<button onclick="appendNumber(4)">4button>
<button onclick="appendNumber(5)">5button>
<button onclick="appendNumber(6)">6button>
<button onclick="appendOperator('+')" class="operator">+button>
<button onclick="appendOperator('-')" class="operator">-button>
<button onclick="appendNumber(1)">1button>
<button onclick="appendNumber(2)">2button>
<button onclick="appendNumber(3)">3button>
<button onclick="appendOperator('*')" class="operator">*button>
<button onclick="appendOperator('/')" class="operator">/button>
<button onclick="appendNumber('00')">00button>
<button onclick="appendNumber(0)">0button>
<button onclick="appendNumber('000')">000button>
<button onclick="alert('功德+1')" class="operator">功德button>
<button onclick="calculate()" class="equal">=button>
div>
div>
body>
这段代码展示了一个简单的计算器布局。1. 我们看到了上面的的DOM已经搭建好了，但是页面什么都看不出来，下面我们简单的来配置一下样式吧，其实我们本专栏也是想带领大家掌握一些逻辑所以样式方面我们就一切从简； 这段代码定义了一些CSS样式,用于美化计算器的外观。1. 上面我们搭建了基本的样式，下面呢我们就通过js代码，实现我们游戏的功能吧，下面是对代码的简化解释： 这段代码是用于实现计算器的功能。1. 完整代码 几何送书七十七期 查看详情 参与方式：本博客中进行评论即可，只要评论内容不被折叠都可以参与抽奖； ✨ 原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下 ：这是一个数字按钮，点击后会将数字7添加到表达式中。5. ：这是一个清除按钮，点击后会清除当前表达式并将显示屏重置为初始值0。6. ：这是一个百分比运算符按钮，点击后会在表达式中添加百分号。7. ：这是一个加法运算符按钮，点击后会在表达式中添加加号。8. ：这是一个特殊的数字按钮，点击后会将字符串"00"添加到表达式中。9. ：这是一个特殊的功能按钮，点击后会弹出一个提示框显示信息"功德+1"。10. ：这是一个等号按钮，点击后会计算当前表达式的结果，并将结果显示在显示屏上。通过点击不同的按钮，用户可以输入数字、运算符和执行特殊功能。
✨ 样式设置
.calculator：这个类选择器用于设置整个计算器的样式。设置了宽度为300px,居中显示,设置了内边距和背景颜色,并且给计算器添加了圆角边框。2. .display：这个类选择器用于设置显示屏的样式。设置了高度、行高和文本对齐方式等样式属性,以及背景颜色和圆角边框。3. .buttons：这个类选择器用于设置按钮区域的样式。使用了网格布局(grid layout)来排列按钮,每行有4列,并且设置了间距。4. button：这个元素选择器用于设置所有按钮的共同样式。设置了高度、字体大小、背景颜色和圆角边框等属性。5. button:hover：这个伪类选择器用于设置鼠标悬停在按钮上时的样式。当鼠标悬停在按钮上时,背景颜色会变成浅灰色,并且光标会变成手型指针。6. button.operator：这个类选择器用于设置运算符按钮的样式。运算符按钮具有特殊的背景颜色和文字颜色。7. button.clear：这个类选择器用于设置清除按钮的样式。清除按钮具有特殊的背景颜色和文字颜色。8. button.equal：这个类选择器用于设置等号按钮的样式。等号按钮占据两列空间,具有特殊的背景颜色和文字颜色。9. button.equal:hover：这个伪类选择器用于设置鼠标悬停在等号按钮上时的样式。当鼠标悬停在等号按钮上时,背景颜色会变成深绿色。通过这些CSS样式,计算器可以呈现出炫酷的外观效果,提升用户体验。
✨ 逻辑部分
let display = document.getElementById("display");：这行代码获取了id为"display"的元素，也就是显示屏，通过document.getElementById()方法来获取。2. let expression = "";：这行代码定义了一个变量expression，用于存储用户输入的表达式。3. function appendNumber(number) { ... }：这个函数用于在表达式中追加数字。当用户点击数字按钮时，会将相应的数字添加到expression变量中，并更新显示屏内容。4. function appendOperator(operator) { ... }：这个函数用于在表达式中追加运算符。当用户点击运算符按钮时，会将相应的运算符添加到expression变量中，并更新显示屏内容。5. function clearDisplay() { ... }：这个函数用于清除显示屏和表达式。当用户点击清除按钮时，会将expression变量重置为空字符串，并将显示屏内容设置为初始值0。6. function calculate() { ... }：这个函数用于计算表达式结果并更新显示屏内容。通过使用eval()函数来计算expression变量中的表达式结果，并根据结果进行不同的处理。如果结果是NaN（非数值），则显示"别闹，没那么智能！"；否则将结果显示在显示屏上，并将expression变量重置为空字符串。通过以上几个函数的组合使用，实现了计算器的基本功能。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>几何⚡️计算器</title>
<style>
.calculator {
width: 300px;
margin: 20px auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 10px;
}
.display {
height: 50px;
line-height: 50px;
text-align: right;
font-size: 24px;
background-color: #fff;
border-radius: 5px;
margin-bottom: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
height: 50px;
font-size: 18px;
background-color: #ddd;
border-radius: 5px;
}
button:hover {
background-color: #ccc;
cursor: pointer;
}
button.operator {
background-color: #ff8c00;
color: #fff;
}
button.operator:hover {
background-color: #ff7f00;
}
button.clear {
background-color: #dc143c;
color: #fff;
}
button.clear:hover {
background-color: #b22222;
}
button.equal {
grid-column-end: span2;
background-color: #008000;
color: #fff;
}
button.equal:hover {
background-color: #006400;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="clearDisplay()" class="clear">C</button>
<button onclick="appendOperator('%')" class="operator">%</button>
<button onclick="appendNumber(4)">4</button>
<button onclick="appendNumber(5)">5</button>
<button onclick="appendNumber(6)">6</button>
<button onclick="appendOperator('+')" class="operator">+</button>
<button onclick="appendOperator('-')" class="operator">-</button>
<button onclick="appendNumber(1)">1</button>
<button onclick="appendNumber(2)">2</button>
<button onclick="appendNumber(3)">3</button>
<button onclick="appendOperator('*')" class="operator">*</button>
<button onclick="appendOperator('/')" class="operator">/</button>
<button onclick="appendNumber('00')">00</button>
<button onclick="appendNumber(0)">0</button>
<button onclick="appendNumber('000')">000</button>
<button onclick="alert('功德+1')" class="operator">功德</button>
<button onclick="calculate()" class="equal">=</button>
</div>
</div>
<script>
let display = document.getElementById("display");
let expression = "";
function appendNumber(number) {
expression += number;
display.innerHTML = expression;
}
function appendOperator(operator) {
expression += operator;
display.innerHTML = expression;
}
function clearDisplay() {
expression = "";
display.innerHTML = "0";
}
function calculate() {
try {
let result = eval(expression);
if (isNaN(result)) {
display.innerHTML = '别闹，没那么智能！';
} else {
display.innerHTML = result;
}
expression = "";
} catch (error) {
display.innerHTML = "Error";
expression = "";
}
}
</script>
</body>
</html>
抽奖方式：程序自动拉取未折叠的评论随机抽取4位伙伴，每人最多可评论5次；
抽奖时间：2023-07-25 17:00；
结果公布：待开奖（获奖者可获得实体书《从零开始读懂物理学》一本）
点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！