JavaScript实现页面倒计时跳转的多种方法
本文详细介绍如何在网页中实现倒计时后自动跳转的功能。通过JavaScript的setInterval和setTimeout定时器，结合location.href属性与innerHTML动态更新显示，可完成10秒或5秒倒计时跳转。此外还涵盖HTML Meta标签及纯JS无UI提示的轻量级实现方案，适用于需要用户等待后重定向的场景。
JavaScript实现页面倒计时跳转的多种方法
许多网页具备在指定时间后自动跳转至其他页面的功能，若加入倒计时显示则更为人性化。本节将演示如何实现该效果，具体代码示例如下：
基于setInterval的倒计时跳转实现
<script type="text/javascript">
var t=10;
setInterval("refer()",1000);
function refer(){
if(t==0){
location.href="//www.jb51.net";
}
document.getElementById('show').innerHTML=""+t+"秒后跳转到本站";
t--;
}
</script>
<span id="show"></span>
上述代码实现了在10秒后跳转至目标页面的功能，接下来介绍其具体实现逻辑。
一、实现原理
核心原理较为简单，主要利用setInterval()定时器函数每秒调用一次refer()函数。该函数每次执行时将变量t减1，并将当前t值写入div元素中。当t减至0即倒计时结束时，执行页面跳转操作。
二、相关参考
1. setInterval()函数用法详见setInterval()函数用法详解一章节。
2. location.href属性详见Location对象的href属性一章节。
3. innerHTML属性详见js的innerHTML属性的用法一章节。
以下补充两种简单的跳转代码示例，并对各类定时跳转方式进行总结：
（1）使用setTimeout函数实现定时跳转（代码需置于body区域内）
使用setTimeout实现无UI跳转
<script type="text/javascript">
//3秒钟之后跳转到指定的页面
setTimeout(window.location.href='//www.jb51.net',3);
</script>
（2）通过HTML代码实现，在页面head区域添加如下代码
HTML Meta标签实现页面刷新跳转
<!--5秒钟后跳转到指定的页面-->
<meta http-equiv="refresh" content="5;url=//www.jb51.net" /> 此处再分享一种较为实用的代码实现方式
纯JS倒计时与跳转逻辑
<div id="num"></div>
<script type="text/javascript">
var num=5;
function redirect(){
num--;
document.getElementById("num").innerHTML=num;
if(num<0){
document.getElementById("num").innerHTML=0;
location.href="//www.jb51.net/";
}
}
setInterval("redirect()", 1000);
</script>以上为javascript实现倒计时跳转页面的详细内容，更多关于该主题的资料请查阅本站其他相关文章！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38