制作简易页面计算器的详细教程和代码分享
今天教大家一个比较简单实用的Web小应用：简单计算器。
这个案例比较简单、比较直观，适合小孩或者初学编程者进行编程入门的练习。
用html进行入门编程练习优点非常多：IDE框架比较轻，VSCode安装方便、调试方便，编程过程相当直观，基本上能够实时更新编程效果，编程过程乐趣更多。编程结果用手机浏览器也能轻松打开。
（与html相比，C#的IDE选用VisualStudio很笨重、Python的IDE一般采用PyCharm也很臃肿、Java的IDE连个前端都没有，没法边编程边调试。）
1.案例介绍
下面介绍一下这个页面可以打开的计算器的主要布局和功能。
页面布置：页眉、页脚、主体；
主体：两个输入文本框、1个输出文本框、一个计算选择框（选择加、减、乘、除）、一个计算按钮；
功能实现：两个输入文本框输入数字，选择计算方式，点击按钮在输出文本框输出结果。
看起来很简单，但是实现也有一定的技术含量。
案例动态演示如下
2.代码实现
代码实现分为两大部分：html部分和script部分，其中html负责实现前端的窗体设计，字体、颜色、间距、视觉效果等等。script代码负责计算代码的实现。
（1）html设计要点
首先要明确一点，做网页版小程序不需要进行过度设计，页眉页脚和主体进行默认排列即可，无需过度美化。
页眉head代码如下：
<head>
<meta charset="utf-8">
<!-- 设置网页字符编码为 UTF-8，支持中文 -->
<title>宇哥Web开发练习-计算器</title>
<!-- 网页标签页显示的标题 -->
</head>
页面各元素的设计style代码如下：
<style>
/* 这是 CSS 样式部分，用于美化页面元素 */
h1 {
font-size: 60px; /* 设置标题文字大小 */
color: #001aff; /* 设置标题颜色为蓝色 */
}
input, select, button {
font-size: 50px; /* 设置输入框、下拉框、按钮的字体大小 */
padding: 5px; /* 内边距 */
margin: 5px; /* 外边距 */
}
input::placeholder {
color: #aa8989; /* 设置输入框占位符文字的颜色 */
}
footer {
margin-top: 50px; /* 顶部外边距 */
padding: 20px; /* 内边距 */
text-align: center; /* 内容居中 */
color: #777; /* 文字颜色为浅灰色 */
font-size: 36px; /* 字体大小 */
border-top: 1px solid #ccc; /* 顶部边框为浅灰色 */
}
</style>页面主体部分body代码和页脚footer代码如下：
<body>
<!-- 页面主要内容区域 -->
<h1>宇哥Web网页小练习-计算器</h1>
<!-- 页面标题 -->
<input type="text" id="x" placeholder="请输入第1个数字">
<!-- 第一个输入框，输入第一个数字 -->
<select id="opt">
<!-- 运算符下拉列表 -->
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input type="text" id="y" placeholder="请输入第2个数字">
<!-- 第二个输入框，输入第二个数字 -->
<button type="button" id="cal">=</button>
<!-- 计算按钮，点击后触发计算逻辑 -->
<input type="text" id="result" placeholder="显示结果">
<!-- 显示计算结果的输入框（只读效果，用户不输入） -->
<footer>
(c) 2025 宇哥编程工作室 | Web开发练习
<!-- 页脚版权信息 -->
</footer>
</body>（2）script代码设计要点
本案例用的还是script内置的加减乘除运算函数，但不能用eval这种函数。
a.核心是一个计算矩阵，也有别的思路但是用矩阵做最快最直观；
b.页面输入的数字不能直接用来计算，必须用toNumber函数进行转化，并且要有纠错机制不然输入错了数据会频繁报错；
c.最后考虑到了小数保留的位数，可以调整（案例给的保留8位小数），但如果计算结果是整数，则不保留小数。
<script>
// 将字符串转换为数字的辅助函数
const toNumber = str => {
const n = Number(str.trim()); // 去掉空格后转成数字
return Number.isFinite(n) ? n : null; // 如果是有限数字则返回，否则返回 null
};
// 定义一个包含各种运算的对象，键是符号，值是对应函数
const OPS = {
'+': (a, b) => a + b, // 加法
'-': (a, b) => a - b, // 减法
'*': (a, b) => a * b, // 乘法
'/': (a, b) => b === 0 ? '除数不能为 0' : a / b, // 除法，检查除数是否为0
'%': (a, b) => b === 0 ? '除数不能为 0' : a % b // 取模，同样检查除数为0
};
// 给“=”按钮绑定点击事件
document.getElementById('cal').addEventListener('click', () => {
// 获取第一个数字的值并转换为数字
const a = toNumber(document.getElementById('x').value);
// 获取第二个数字的值并转换为数字
const b = toNumber(document.getElementById('y').value);
// 获取选中的运算符
const op = document.getElementById('opt').value;
// 获取显示结果的输入框
const out = document.getElementById('result');
// 如果任意一个输入无效，提示错误
if (a === null || b === null) {
out.value = '请输入有效数字';
return;
}
// 计算结果
const res = OPS[op](a, b);
// 判断结果类型，若是数字则格式化显示（保留小数），否则直接显示错误提示
out.value = typeof res === 'number'
? (res % 1 === 0 ? res : res.toFixed(8)) // 整数直接显示，小数保留4位
: res; // 非数字（如错误信息）直接显示
});
</script>（3）所有代码
所有代码粘在下面，全部复制粘贴就OK了，网页打开直接用：
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html>
<head>
<meta charset="utf-8">
<!-- 设置网页字符编码为 UTF-8，支持中文 -->
<title>宇哥Web开发练习-计算器</title>
<!-- 网页标签页显示的标题 -->
</head>
<style>
/* 这是 CSS 样式部分，用于美化页面元素 */
h1 {
font-size: 60px; /* 设置标题文字大小 */
color: #001aff; /* 设置标题颜色为蓝色 */
}
input, select, button {
font-size: 50px; /* 设置输入框、下拉框、按钮的字体大小 */
padding: 5px; /* 内边距 */
margin: 5px; /* 外边距 */
}
input::placeholder {
color: #aa8989; /* 设置输入框占位符文字的颜色 */
}
footer {
margin-top: 50px; /* 顶部外边距 */
padding: 20px; /* 内边距 */
text-align: center; /* 内容居中 */
color: #777; /* 文字颜色为浅灰色 */
font-size: 36px; /* 字体大小 */
border-top: 1px solid #ccc; /* 顶部边框为浅灰色 */
}
</style>
<body>
<!-- 页面主要内容区域 -->
<h1>宇哥Web网页小练习-计算器</h1>
<!-- 页面标题 -->
<input type="text" id="x" placeholder="请输入第1个数字">
<!-- 第一个输入框，输入第一个数字 -->
<select id="opt">
<!-- 运算符下拉列表 -->
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input type="text" id="y" placeholder="请输入第2个数字">
<!-- 第二个输入框，输入第二个数字 -->
<button type="button" id="cal">=</button>
<!-- 计算按钮，点击后触发计算逻辑 -->
<input type="text" id="result" placeholder="显示结果">
<!-- 显示计算结果的输入框（只读效果，用户不输入） -->
<footer>
(c) 2025 宇哥编程工作室 | Web开发练习
<!-- 页脚版权信息 -->
</footer>
</body>
</html>
<script>
// 将字符串转换为数字的辅助函数
const toNumber = str => {
const n = Number(str.trim()); // 去掉空格后转成数字
return Number.isFinite(n) ? n : null; // 如果是有限数字则返回，否则返回 null
};
// 定义一个包含各种运算的对象，键是符号，值是对应函数
const OPS = {
'+': (a, b) => a + b, // 加法
'-': (a, b) => a - b, // 减法
'*': (a, b) => a * b, // 乘法
'/': (a, b) => b === 0 ? '除数不能为 0' : a / b, // 除法，检查除数是否为0
'%': (a, b) => b === 0 ? '除数不能为 0' : a % b // 取模，同样检查除数为0
};
// 给“=”按钮绑定点击事件
document.getElementById('cal').addEventListener('click', () => {
// 获取第一个数字的值并转换为数字
const a = toNumber(document.getElementById('x').value);
// 获取第二个数字的值并转换为数字
const b = toNumber(document.getElementById('y').value);
// 获取选中的运算符
const op = document.getElementById('opt').value;
// 获取显示结果的输入框
const out = document.getElementById('result');
// 如果任意一个输入无效，提示错误
if (a === null || b === null) {
out.value = '请输入有效数字';
return;
}
// 计算结果
const res = OPS[op](a, b);
// 判断结果类型，若是数字则格式化显示（保留小数），否则直接显示错误提示
out.value = typeof res === 'number'
? (res % 1 === 0 ? res : res.toFixed(8)) // 整数直接显示，小数保留4位
: res; // 非数字（如错误信息）直接显示
});
</script>