企业项目管理、ORK、研发管理与敏捷开发工具平台

网站首页 > 精选文章 正文

制作简易页面计算器的详细教程和代码分享

wudianyun 2025-07-21 18:25:47 精选文章 7 ℃

今天教大家一个比较简单实用的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>

Tags：

猜你喜欢

最近发表
标签列表