基于 HTML5 + Canvas + MathJax 构建的交互式数学教学网页,围绕"无穷级数收敛性"核心专题,提供实时可视化实验与自测功能。
🔗 在线体验:https://smzxzbc.github.io/html5-math-explorer/
本项目是一个单文件 HTML5 沉浸式数学学习空间,专注于级数收敛性这一高等数学核心概念。通过实时 Canvas 可视化、交互式参数调节和即时反馈的自测系统,帮助学习者直观理解:
- 几何级数的收敛条件
$|r| < 1$ - p-级数的临界现象
$p > 1$ 收敛 /$p \leq 1$ 发散 - 交错级数的莱布尼茨判别法与截断误差估计
- 比较判别法、比值判别法、根值判别法的系统应用
| 模块 | 功能描述 | 技术亮点 |
|---|---|---|
| 首屏导言 | 动态粒子背景 + 核心公式展示 | Canvas 粒子动画系统 |
| 核心概念 | 级数定义、部分和、收敛/发散判定 | MathJax 实时公式渲染 |
| 几何级数实验室 | 实时调节 |
双视图联动可视化 |
| p-级数探索 | 调节指数 |
临界状态动态切换 |
| 交错级数演示 | 三种级数类型 + 莱布尼茨验证 + 误差估计 | 误差带可视化 |
| 判别法工具箱 | 三种判别法交互演示 + 决策树 | 对比柱状图动画 |
| 知识自测 | 8 道精选选择题,即时反馈 | 选项状态管理 |
无需下载,直接访问:
https://smzxzbc.github.io/html5-math-explorer/
浏览器要求:Chrome / Edge / Firefox 最新版(需联网加载 MathJax CDN)
- 克隆仓库:
git clone https://github.com/SMZXzbc/html5-math-explorer.git
- 进入文件夹,用浏览器打开
index.html - 确保设备联网(MathJax 公式渲染需要 CDN)
html5-math-explorer/
├── index.html # 主文件(HTML + CSS + JS 全内联)
├── 使用说明.md # 详细操作指南
└── README.md # 本文件
采用单文件架构,所有样式与逻辑内联于
index.html,无需额外依赖。
- HTML5 Canvas 2D — 全部可视化图表
- MathJax 3 — 数学公式实时渲染(CDN)
- 原生 JavaScript — 无框架依赖
- CSS3 — 暗色主题、响应式布局、滚动动画
第一次学习:导言 → 核心概念 → 几何级数实验室 → p-级数探索 → 自测
深入理解:交错级数 → 判别法工具箱 → 再次自测检验提升
复习巩固:针对自测错题,回到对应模块重新操作与观察