码迷,mamicode.com
首页 > Web开发 > 详细

js指定时间之后跳转到指定页面代码实例

时间:2016-01-01 00:25:06      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:

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

 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>js指定时间之后跳转到指定页面代码实例-蚂蚁部落</title> 
<script type="text/javascript">
function redirect()
{
  if(second<0)
  {
    location.href=http://wwww.softwhy.com;
  } 
  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://wwww.softwhy.com‘;} ,如果数字小于零,那么就会跳转。
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的String对象的indexOf()方法一章节。
2.setInterval()函数可以参阅setInterval()函数用法详解一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8814

更多内容可以参阅:http://www.softwhy.com/javascript/

 

js指定时间之后跳转到指定页面代码实例

标签:

原文地址:http://www.cnblogs.com/come-on/p/5092815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!