百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

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

liuian 2025-07-23 16:11 30 浏览

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

相关推荐

git的撤销、删除和版本回退_git撤销删除的文件

备注：本文参考于廖雪峰的博客Git教程。依照其博客进行学习和记录，感谢其无私分享，也欢迎各位查看原文。知识点：1、gitstatus，查看git仓库的状态2、gitdiff查看git修改了的内容...

程序员开发必会之git常用命令，git配置、拉取、提交、分支管理

整理日常开发过程中经常使用的git命令！git配置SSH刚进入项目开发中，我们首先需要配置git的config、配置SSH方式拉取代码，以后就免输入账号密码了！#按顺序执行gitconfig-...

Git使用指南 | 教你轻松学会Git_git用法详解

4000字，教大家学会Git使用。一、Git基础1、Git介绍Git是目前世界上最先进的分布式版本控制系统。版本控制系统：设计师在设计的时候做了很多版本经过了数天去问设计师每个版本都改了些啥，设计师此...

深入浅出 Git_深入浅出 gRPC

git初体验使用git前需设置用户名和Email，这些信息会出现在提交记录中以标识作者。gitconfig--globaluser.name"YeHanlin"gitc...

Git不提交指定文件的方法_git不提交指定文件的方法有哪些

大家在开发项目的时候都很喜欢使用git作为代码管理工具，但是在开发项目的时候我们的本地配置文件不应该覆盖服务器中的配置文件，我们使用命令gitstatus查看待提交文件的时候需要注意不要把本地的配...

相见恨晚的 Git 命令动画演示，一看就懂

虽然Git是一个强大的工具，但是我觉得大部分人都会同意我说的：它也可以是一个……噩梦！我一直觉得，使用Git的时候把操作过程在脑海里视觉化会非常有用：当我执行某个命令的时候，分支之间是如何交互...

GitCode的一些命令_git命令大全

GitCode的一些命令配置工具对所有本地仓库的用户信息进行配置$gitconfig--globaluser.name"[name]"对你的commit操作设置关联的用户名$...

【git】 如何删除所有 tag(本地和远程)

要删除所有本地和远程的Git标签，可以按照以下步骤进行：删除本地标签首先，删除本地标签。你可以使用以下命令删除本地的所有标签：gittag-d$(gittag-l)这将列出并删除所有本地...

互联网大漏洞:每600个网站就有1个暴露了.git文件夹

对于Web开发人员来说，向外界暴露你的.git文件夹绝对是一个菜鸟级错误。因为这样会允许任何人下载你的整个源代码存储库，包括数据库密码、加密盐、Hash和第三方接口密钥API，还有你的用户名和密码。多...

git常用命令整理_git 常用

一、Git仓库完整迁移完整迁移，就是指，不仅将所有代码移植到新的仓库，而且要保留所有的commit记录1.随便找个文件夹，从原地址克隆一份裸版本库gitclone--bare旧的git地址...

项目常用GIT操作命令_git常用操作命令 简书

Git仓库更新依赖的命令：gradle--refresh-dependenciesgradleaR完全编译；./gradlewecomm:packages:telephony:larges...

【超详细】Git 所有常用命令 + 提交规范全指南(建议收藏!)

Git命令大全初始化类命令作用gitinit初始化一个本地Git仓库（当前目录会出现.git文件夹）gitclone<仓库地址>克隆远程仓库到本地，一般用来拉项目提交代...

Git 常用的alias命令大全_git -a

Git的alias（别名）功能可以将常用的复杂命令简化，大幅提升操作效率。以下是一些实用的Gitalias配置和常用示例：一、配置alias的方法通过gitconfig命令设置，分...

Git使用教程:最详细、最傻瓜、最浅显、真正手把手教

导读：因为教程详细，所以行文有些长，新手边看边操作效果出乎你的预料。GitHub虽然有些许改版，但并无大碍。一、Git是什么？Git是目前世界上最先进的分布式版本控制系统。工作原理/流程：Work...

实用干货分享(3)- Git常用操作干货分享

官方学习地址https://git-scm.com/book/zh/v2简单的代码提交流程1.gitstatus查看工作区代码相对于暂存区的差别；2.gitadd.将当前目录下修改的所有...

一周热门
最近发表
标签列表