一、需要实现的功能
实现一个简单有趣的计算器，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用。
二、需求功能细化
该计算器需具有以下使用方法和功能：
（1）显示屏
计算结果会显示在屏幕上方的显示屏中，初始值为0。
（2）数字按钮
点击数字按钮可以输入相应的数字。例如，点击"7"按钮会将数字7添加到表达式中，并在显示屏上更新为"7"。
（3）运算符按钮
点击运算符按钮可以输入相应的运算符。例如，点击"+"按钮会将加号运算符添加到表达式中，并在显示屏上更新为当前表达式。
（4）清除按钮
点击"C"按钮可以清除当前表达式并将显示屏重置为初始值"0"。
（5）百分比运算
点击"%“按钮可以将当前数值转换为百分比形式。例如，如果当前表达式为"100”，点击"%“后，表达式会变成"100%”。
（6）点赞按钮
点击"点赞"按钮会弹出一个提示框，显示信息“点赞+1”。
（7）等号按钮
点击等号(“=”)按钮会计算当前表达式的结果，并将结果显示在显示屏上。如果表达式无法计算或者包含非法字符，则显示屏会显示错误信息。
（8）错误处理
如果计算过程中发生错误（例如除以零），则在显示屏上显示错误信息，并清空当前表达式。
三、H5页面设计
我们创建一个命名为 calculate.html 的文件通过编辑器（我用的EditPlus）打开。使用<!DOCTYPE>声明HTML文档类型，确保浏览器以正确的方式渲染网页内容。同时，设置UTF-8编码，以确保浏览器能够正确地解析和显示中文字符。
以下是计算器的DOM结构了。
<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>
</body>
该代码展示了一个简单的计算器布局。
（1）<div class="calculator">：这是整个计算器的容器，用于包裹所有的元素。
（2）<div class="display" id="display">0</div>：这是显示屏，用于显示计算结果或输入的数字和运算符。初始值为0。
（3）<div class="buttons">：这是按钮区域的容器，用于包裹所有的按钮。
（4）<button onclick="appendNumber(7)">7</button>：这是一个数字按钮，点击后会将数字7添加到表达式中。
（5）<button onclick="clearDisplay()" class="clear">C</button>：这是一个清除按钮，点击后会清除当前表达式并将显示屏重置为初始值0。
（6）<button onclick="appendOperator('%')" class="operator">%</button>：这是一个百分比运算符按钮，点击后会在表达式中添加百分号。
（7）<button onclick="appendOperator('+')" class="operator">+</button>：这是一个加法运算符按钮，点击后会在表达式中添加加号。
（8）<button onclick="appendNumber('00')">00</button>：这是一个特殊的数字按钮，点击后会将字符串"00"添加到表达式中。
（9）<button onclick="alert('点赞+1')" class="operator">点赞</button>：这是一个特殊的功能按钮，点击后会弹出一个提示框显示信息"点赞+1"。
（10）<button onclick="calculate()" class="equal">=</button>：这是一个等号按钮，点击后会计算当前表达式的结果，并将结果显示在显示屏上。
通过点击不同的按钮，用户可以输入数字、运算符和执行特殊功能。
四、CSS样式设置
上面html已经准备好了，下面我们简单的来配置一下样式吧。
<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>
该代码定义了一些CSS样式,用于美化计算器的外观。
（1）.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样式,计算器可以呈现出炫酷的外观效果,提升用户体验。
五、代码逻辑，游戏实现
<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>
现在解释一下关键部分的代码。
（1）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="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<style>
h1 {
font-size: 19px;
text-align: center;
}
.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>
<h1>计算器</h1>
<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>
</body>
<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>
</html>
以上是计算器的完整代码，可以直接复制过去，或者点击计算器demo链接访问。