HTML无法预测学习完成时间，必须依赖JavaScript通过滚动行为、时间戳和localStorage等动态估算阅读进度与剩余时间。
HTML 里没法直接预测学习完成时间
浏览器原生 HTML 不具备计算能力，input、progress 或 time 标签本身不会“估算”或“预测”。所谓“基于当前速度估算”，必须靠 JavaScript 实时读取用户行为（比如阅读进度、停留时长、滚动速度），再结合内容总量做简单线性推算。HTML 只负责承载结构和触发时机。
用 performance.now() + 页面滚动监听估算阅读速度
真实场景中，“当前速度”往往指用户在文档内滚动/翻页的节奏。单纯用 setTimeout 或页面加载时间毫无意义——人不是匀速阅读机器。
- 监听
scroll事件，记录每次触发的时间戳和window.scrollY - 只在用户持续滚动（比如 2 秒内滚动 >100px）时才采样，过滤掉停顿、回滚、误触
- 用最近 3–5 次有效滚动间隔和位移差，算出平均像素/毫秒，再换算成“读完剩余内容还需多久”
- 注意：移动端
scroll事件可能节流严重，建议用requestIdleCallback或IntersectionObserver配合判断可视区域变化更稳
localStorage 存上次阅读位置比“预测”更实用
用户真正需要的往往不是“还剩 12 分钟”，而是“我上次看到哪儿了”。预测容易不准，但位置记忆几乎零误差。
- 在
beforeunload或visibilitychange事件里存localStorage.setItem('lastScroll', window.scrollY) - 页面加载后立刻
scrollTo(0, localStorage.getItem('lastScroll') || 0) - 比任何速度模型都快、兼容性好（IE8+）、不依赖内容结构是否可测字数或段落高度
- 如果非要加预测，建议只在用户已停留 >30 秒且滚动过至少两屏后再启动，避免首页刚打开就显示“预计还需 47 分钟”这种荒谬结果
别硬套“学习时长”概念到静态 HTML 上
HTML 文件本身没有“学习”属性，所谓“课程页”“教程页”只是开发者赋予的语义。浏览器不会识别你写的是 React 教程还是 CSS 基础。
立即学习“前端免费学习笔记（深入）”；
- 如果页面是服务端生成的（如 Next.js、SSG），可在构建时注入预估字数或段落数到
data-属性，比如<article data-word-count="2840"></article> - 客户端 JS 再结合用户历史平均阅读速度（从
localStorage读）做粗略换算，但需明确标注“基于您过往阅读习惯估算” - 最常被忽略的一点：用户关闭页面前没触发
beforeunload（比如崩溃、强制杀进程），localStorage就会滞后。所以预测值永远要带缓冲区间，比如“约 8–15 分钟”，而不是“8.3 分钟”
