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

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

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

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

相关推荐

VS Code当中的15个神仙插件，值得收藏

VisualStudioCode是一款轻量级但功能强大的源代码编辑器，适用于Windows、macOS和Linux。内置了对JavaScript、TypeScript和Node.js...

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

今天教大家一个比较简单实用的Web小应用：简单计算器。这个案例比较简单、比较直观，适合小孩或者初学编程者进行编程入门的练习。用html进行入门编程练习优点非常多：IDE框架比较轻，VSCode安装方便...

CSS视觉格式化模型，你真的了解么?

CSS视觉格式化模型（visualformattingmodel）是用来处理文档并将它显示在视觉媒体上的机制。这是CSS2.1的一个基础概念。视觉格式化模型根据CSS盒模型为文档的每个元素生成0...

用Cursor开启JAVA+AI生涯（启用java script）

Cursor是基于VSCode开发的一款编辑器，支持多种语言的开发编辑。与传统的开发工具相比，它有多种优势：与AI无缝集成，响应速度快，占用内存小。但很多同学在"起步"过程中遇到了...

C# WinForms中maskedTextBox控件使用的简单示例

在C#WinForms中，MaskedTextBox是一个用于输入格式化文本的控件。它允许您定义一个掩码（Mask），指定输入的文本应该遵循的特定格式。以下是一个简单的示例，演示如何在WinForm...

C#编程基础(看这一篇就够了)（c#编程实例100篇）

C#及其开发环境简介C#概述C#是一个现代的、通用的、面向对象的编程语言，由微软（Microsoft）开发，经Ecma和ISO核准认可。它由AndersHejlsberg和他的团队在.NET框架开发...

Visual Studio Package 插件开发(Visual Studio SDK)

背景　　这段时间公司新做了一个支付系统，里面有N个后台服务，每次有更新修改，拷贝打包发布包“不亦乐乎”。。。于是我想要不要自己定制个打包插件。　　部分朋友可能会认为，有现成的可以去找一个，干嘛不用持续...

10个必备的Visual Studio Code (VS code)插件

我基本上每天都用vscode，我喜欢的小巧，开源，免费并且非常强大。尤其它非常多的插件可以免费使用。这里我把经常用插件介绍给大家，希望大家留言讨论我把VScode插件分两类，一类是处理可视化的，...

【推荐】一款超牛×的Visual Studio 2022插件

今天给大家推荐一款超级NB的VisualStudio2022插件——CodeMain，这是一个代码格式化及处理的插件。　一、打开添加扩展窗口；　　二、查找扩展；　　三、管理扩展；　　四、CodeM...

Visual Studio跨平台开发实战(2):Xamarin.iOS基本控制项介绍

前言在上一篇文章中,我们介绍了Xamarin以及简单的HelloWorld范例,这次我们针对iOS的专案目录架构以及基本控制项进行说明.包含UIButton,UISlider,UISwitch...

Visual Studio Code（visual studio code干什么用的）

VisualStudioCode（简称VSCode是一款由微软开发的轻量级、强大而且免费的代码编辑器。它不仅支持多种编程语言，如Python、JavaScript、Java等，还拥有丰富的插件生...

团队协作-代码格式化工具clang-format

环境：clang-format:10.0.0前言统一的代码规范对于整个团队来说十分重要，通过git/svn在提交前进行统一的ClangFormat格式化，可以有效避免由于人工操作带来的代码格式问题。C...

Visual Studio 2022 辅助插件介绍

在软件开发的世界里，效率和质量是永恒的追求。VisualStudio2022作为一款功能强大的集成开发环境（IDE），通过引入各种辅助插件，能够极大地提升开发者的编码效率、代码质量和开发体验。本...

五款安卓程序 帮助管理你的网络存储

2015-09-1605:46:00作者：赵为民安卓设备以及非常普及，利用安全可以很好的管理的你各种服务……也包括你的存储。当然，现在几乎所有的NAS存储厂商都提供了一个应用程序，让你利用安卓设备...

局域网一个飞牛Nas，一个群晖Nas，如何互传文件?

本内容来源于@什么值得买APP，观点仅代表作者本人｜作者：科技菜菜家里有一个入门群晖Nas一直在做照片备份，现在有新添了一个小主机飞牛Nas。现在遇到了一个新问题，备份到群辉的多个手机照片已经超过5...

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