JavaScript实现倒计时自动跳转页面的方法

JavaScript实现倒计时自动跳转页面的方法

在某些特定场景下，需要网页在设定的时间结束后自动跳转到目标地址。例如，当用户访问不存在的页面时，系统显示404错误页的同时，可以配置自动跳转到首页或其他指定页面。以下代码展示了如何实现这一功能。

具体实现代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>js指定时间之后跳转到指定页面代码实例</title> 
<script type="text/javascript">
function redirect()
{
if(second<0)
{
location.href='http://wwww.jb51.net';
} 
else
{
if(navigator.appName.indexOf("Explorer")>-1)
{
document.getElementById('totalSecond').innerText=second--;
} 
else
{
document.getElementById('totalSecond').textContent=second--;
}
}
}
window.onload=function()
{
var second=document.getElementById('totalSecond').textContent;
if(navigator.appName.indexOf("Explorer")>-1)
{
second=document.getElementById('totalSecond').innerText;
} 
else
{
second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()",1000);
}
</script>
</head>
<body>
<h1>找不到指定的页面</h1>
<span id="totalSecond">3</span>秒后自动跳转到指定页面
</body>
</html>

上述代码实现了在三秒后自动跳转至指定页面的功能。接下来简要解析其实现逻辑。

实现原理与逻辑解析

一、实现原理

核心思路是利用定时器函数，每隔一秒更新一次span元素中显示的数字。当倒计时数字归零或变为负数时，触发页面跳转至预设链接。具体逻辑可参考代码中的注释说明。

代码逐行注释说明

二、代码详细注释

1. function redirect(){}：定义一个名为redirect的函数，用于处理跳转逻辑。 2. if(second<0) {location.href='http://wwww.jb51.net';}：判断倒计时变量second是否小于0，若是，则执行页面跳转，将location.href指向目标网址。 3. else{}：若时间未到，则继续执行倒计时逻辑。 4. if(navigator.appName.indexOf("Explorer")>-1)：检测当前浏览器是否为IE浏览器，通过判断appName中是否包含"Explorer"字符串。 5. document.getElementById('totalSecond').innerText=second--：若为IE浏览器，则使用innerText属性更新id为totalSecond的span元素内容，并将second值减1。 6. document.getElementById('totalSecond').textContent=second--：若非IE浏览器，则使用textContent属性更新span元素内容，同样将second值减1。 7. window.onload=function(){}：确保文档完全加载完毕后，再执行初始化代码。 8. if(navigator.appName.indexOf("Explorer")>-1){}：再次判断是否为IE浏览器，以便获取初始倒计时数值。 9. second = document.getElementById('totalSecond').textContent：若为IE浏览器，通过innerText获取span的初始值；其他标准浏览器则通过textContent获取。 10. setInterval("redirect()",1000)：设置定时器，每隔1000毫秒（即1秒）执行一次redirect函数。

相关技术参考

三、相关参考资料

1. 关于indexof()函数的用法，可参考JavaScript中lastIndexOf()方法的使用详解章节。 2. 关于setInterval()函数的应用，可参考setInterval()和setTimeout()的用法及区别示例介绍章节。

以上是基于JavaScript实现定时跳转到指定页面的完整教程，希望对大家有所帮助。