记时指定时间页面跳转代码实例

倒计时指定时间页面跳转代码实例

倒计时指定时间页面跳转代码实例:
很多网页都有类似的效果，那就是经过指定的时间能够跳转到其他页面，如果再人性化一点话，会带有倒计时效果，本章节就介绍一下如何实现此效果，代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head> 
<body> 
<script type="text/javascript"> 
var t=10;
setInterval("refer()",1000); 
function refer(){ 
  if(t==0){ 
    location.href="http://www.softwhy.com";
  } 
  document.getElementById('show').innerHTML=""+t+"秒后跳转到蚂蚁部落";
  t--;
} 
</script> 
<span id="show"></span> 
</body> 
</html>

以上代码实现了我们想要的效果，能够在10秒之后跳转到指定页面，下面介绍一下实现过程。
一.实现原理:
原理非常的简单，就是利用setInterval()定时器函数，每秒执行一次refer()函数，此函数能够没执行一次将t减1，同时将当前的t的值写入div中，如果t减到0,也就是倒计时完毕，就跳转到指定页面。原理大致如此。
二.相关阅读:
1.setInterval()函数可以参阅setInterval()函数用法详解一章节。
2.location.href可以参阅Location对象的href属性一章节。
3.innerHTML属性可以参阅js的innerHTML属性的用法一章节。

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

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

记时指定时间页面跳转代码实例

相关推荐