很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果再人性化一点话,会带有倒计时效果,本章节就介绍一下如何实现此效果,代码实例如下:
以上代码实现了我们想要的效果,能够在10秒之后跳转到指定页面,下面介绍一下实现过程。
一.实现原理:
原理非常的简单,就是利用setInterval()定时器函数,每秒执行一次refer()函数,此函数能够没执行一次将t减1,同时将当前的t的值写入div中,如果t减到0,也就是倒计时完毕,就跳转到指定页面。原理大致如此。
二.相关阅读:
1.setInterval()函数可以参阅setInterval()函数用法详解一章节。
2.location.href可以参阅Location对象的href属性一章节。
3.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
<script type="text/javascript"> var t=10; setInterval("refer()",1000); function refer(){ if(t==0){ location.href="https://www.jb51.net"; } document.getElementById('show').innerHTML=""+t+"秒后跳转到"; t--; } </script> <span id="show"></span>
2.location.href可以参阅Location对象的href属性一章节。
3.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
下面给大家分享2个简单的跳转代码,做一下总结,各种定时跳转代码记录如下:
(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内)
<script type="text/javascript"> //3秒钟之后跳转到指定的页面 setTimeout(window.location.href='https://www.jb51.net',3); </script>
(2)html代码实现,在页面的head区域块内加上如下代码
<!--5秒钟后跳转到指定的页面--> <meta http-equiv="refresh" content="5;url=https://www.jb51.net" />
标签:
javascript,倒计时
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金钱帮资源网 Copyright www.kbjia.com
暂无“javascript实现倒计时跳转页面”评论...
更新日志
2024年10月09日
2024年10月09日
- 【原神】V5.0攻略 | 林尼攻略一图流
- 李翊君.1993-相思的烈酒【上华】【WAV+CUE】
- 古巨基.1998-LEO.KU(国)【千禧年代】【WAV+CUE】
- 郭子.2001-原来你什么都不想要创作集丫滚石】【WAV+CUE】
- 《使命召唤:黑色行动6》新预告公布!10月25日发售
- Atlus《暗喻幻想》媒体评分汇总:高分好评如潮!
- 2024金摇杆奖提名揭晓 《黑神话》角逐最佳视觉设计!
- 群星《新说唱2024 第3期 (上)》[320K/MP3][32.76MB]
- 群星《新说唱2024 第3期 (上)》[FLAC/分轨][95.38MB]
- 群星《新说唱2024 第3期 (下)》[320K/MP3][31.36MB]
- 幻兽帕鲁手游什么时候正式上线 最新消息一览
- 西普大陆BOSS位置盘点 解锁天启纪元玩法
- 西普大陆精灵进阶培养攻略 精灵养成指南
- dnf手游法控法系职业哪个强 dnf手游法控法系职业强度排行
- 魔兽世界血藤护目镜图纸在哪买 wlk血藤护目镜图纸购买位置介绍