基于JavaScript实现定时跳转到指定页面

时间：2021-05-25

在某些场景下，需要网页在指定的时间后，网页能够自动跳转到指定页面，比如在无法找到指定网页的情况下，就会显示之前设置好的404页面，并且跳转到指定的页面，下面就是一段代码实现了此效果。

代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="https:///" /><title>js指定时间之后跳转到指定页面代码实例</title> <script type="text/javascript">function redirect(){if(second<0){location.href='http://w';} 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(){}，声明一个含糊，用于跳转。
2.if(second<0) {location.href='http://w';} ，如果数字小于零，那么就会跳转。
3.else{}，否则进行倒计时效果。
4.if(navigator.appName.indexOf("Explorer")>-1)，判断是否是IE浏览器。
5.document.getElementById('totalSecond').innerText=second--，如果是IE浏览器则使用innerText属性设置span元素中的数字值。
6.document.getElementById('totalSecond').textContent=second--，其他浏览器使用textContent属性设置span元素中的数字值。
7.window.onload=function(){}，当文档完全加载完毕再去执行函数中的代码。
8.if(navigator.appName.indexOf("Explorer")>-1){}，如果是IE浏览器则使用innerText属性获取span元素中的内容。
9.second = document.getElementById('totalSecond').textContent，其他标准浏览器使用textContent属性获取span元素值。
10.setInterval("redirect()",1000),每隔一秒执行一次定时器函数。

三.相关阅读:

1.indexof()函数可以参阅JavaScript中的lastIndexOf()方法使用详解一章节。
2.setInterval()函数可以参阅setInterval()和setTimeout()的用法和区别示例介绍一章节。

以上内容是小编给大家分享的基于JavaScript实现定时跳转到指定页面的全部叙述，希望大家喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章