JavaScript实现倒计时跳转更优，因meta标签不可控、不灵活、无状态暴露且缺乏回调；JS可暂停、更新DOM、发请求、兼容响应式框架，并解决移动端计时卡顿、路径错误等边界问题。
倒计时跳转该用 meta http-equiv="refresh" 还是 JavaScript？
直接说结论：纯 meta 标签能实现，但不可控、不灵活、不兼容现代交互需求。它只适合「静态页面秒级强制跳转」这种极简场景，比如维护页提示 5 秒后回首页。一旦需要显示剩余时间、点击暂停、跳转前发请求或兼容移动端横竖屏切换，meta 就失效了——它根本不暴露倒计时状态，也没回调机制。
实际项目中，99% 的倒计时跳转都该用 JavaScript 实现。浏览器对 meta http-equiv="refresh" 的支持虽广泛，但行为不一致（例如 Safari 可能忽略带参数的跳转），且无法监听跳转前的用户操作。
meta http-equiv="refresh" 的写法和致命限制
如果真要用 meta，必须写在 <head> 里，格式严格：<meta http-equiv="refresh" content="3;url=/success.html">。其中 3 是秒数，url= 后是目标路径。
- 不能写成
content="3; url=/success.html"（空格会导致部分旧 IE 解析失败） - 目标 URL 必须是相对路径或绝对路径，不能是 JS 表达式或变量
- 倒计时期间用户刷新页面，会重置计时器——无法暂停、无法续计
- 无法获取当前剩余秒数，也就没法做 DOM 更新（比如显示 “3…2…1”）
- 某些企业内网环境或安全策略会禁用
http-equiv类型的 meta 标签
用 JavaScript 实现可交互的倒计时跳转
核心逻辑就三步：启动定时器、更新 DOM、到期执行 window.location.href。关键是要把倒计时值存在变量里，而不是藏在 HTML 属性中。
立即学习“前端免费学习笔记（深入）”；
示例代码（放在 <body> 底部或 DOMContentLoaded 里）：
<div id="countdown">5</div>
<script>
let seconds = 5;
const countdownEl = document.getElementById('countdown');
const timer = setInterval(() => {
seconds--;
countdownEl.textContent = seconds;
if (seconds <= 0) {
clearInterval(timer);
window.location.href = '/success.html';
}
}, 1000);
</script>
这样写的好处是：可随时通过 clearInterval(timer) 暂停；可绑定按钮控制；可加 loading 状态；可兼容 Vue/React 的响应式更新（只需把 seconds 换成响应式数据）。
容易被忽略的边界问题
真实部署时，这几个点常导致跳转失败或体验断裂：
- 目标路径写错：用
/success.html是根路径，但如果是子目录部署（如https://a.com/app/），应改用相对路径success.html或动态拼接location.origin + '/app/success.html' - 跳转前未清理定时器：如果用户快速多次进入该页面，多个
setInterval会同时运行，导致秒数狂减甚至重复跳转 - 移动端键盘弹出时，iOS Safari 可能暂停
setInterval，造成倒计时“卡住”。稳妥做法是用performance.now()记录起始时间，每次检查已过时长，而非依赖 setInterval 累加 - 没处理页面卸载：用户在倒计时期间点击其他链接或关闭标签页，定时器仍可能触发跳转——需监听
beforeunload清理
真正上线的倒计时跳转，几乎不会只靠一行 meta 标签撑住。它看起来简单，但时间精度、路径可靠性、中断控制这些细节，全得靠 JS 层兜底。
