发帖
扫码访问
 注册
 登录
首页 ›电脑› 电脑学堂 › 查看内容

javascript实现倒计时跳转页面

2016-1-19 15:12 1890 0

摘要: 很多网页都有类似的效果，那就是经过指定的时间能够跳转到其他页面，如果再人性化一点话，会带有倒计时效果，本章节就介绍一下如何实现此效果，代码实例如下:?123456789101112script type="text/javascript" var ...
关键词： 函数 代码 效果 章节 setInterval 属性 原理 一下 页面 倒计时

很多网页都有类似的效果，那就是经过指定的时间能够跳转到其他页面，如果再人性化一点话，会带有倒计时效果，本章节就介绍一下如何实现此效果，代码实例如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
var t=10;
setInterval("refer()",1000);
function refer(){
 if(t==0){
 location.href="http://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属性的用法一章节。

下面给大家分享2个简单的跳转代码，做一下总结，各种定时跳转代码记录如下：

（1）使用setTimeout函数实现定时跳转（如下代码要写在body区域内）

声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除

路过
雷人
握手
鲜花
鸡蛋
收藏 分享 邀请
上一篇：PHP实现QQ登录实例代码下一篇：CSS3实现18种Loading效果

最新评论

相关分类

返回顶部