javascript实现倒计时跳转页面


Posted in Javascript onJanuary 17, 2016
很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果再人性化一点话,会带有倒计时效果,本章节就介绍一下如何实现此效果,代码实例如下:
<script type="text/javascript"> 
var t=10;
setInterval("refer()",1000); 
function refer(){ 
 if(t==0){ 
 location.href="https://3water.com";
 } 
 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区域内)

<script type="text/javascript"> 
//3秒钟之后跳转到指定的页面 
setTimeout(window.location.href='https://3water.com',3); 
</script>

(2)html代码实现,在页面的head区域块内加上如下代码

<!--5秒钟后跳转到指定的页面--> 
<meta http-equiv="refresh" content="5;url=https://3water.com" />
Javascript 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 #Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 #Javascript
input点击后placeholder中的提示消息消失
Jan 15 #Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 #Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 #Javascript
利用CSS3在Angular中实现动画
Jan 15 #Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 #Javascript
You might like
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
apache php模块整合操作指南
2012/11/16 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
几个SQL的面试题
2014/03/08 面试题
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
法学专业应届生求职信
2013/10/16 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
小学生评语集锦
2014/04/18 职场文书
一年级学生期末评语
2014/04/21 职场文书
体育教师求职信
2014/06/30 职场文书
离婚被告答辩状
2015/05/22 职场文书
新郎新娘致辞
2015/07/31 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸