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 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
详解用node编写自己的cli工具
May 23 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 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
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
Linux文件系统类型
2012/09/16 面试题
党校培训思想汇报
2014/01/03 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
工程专业应届生求职信
2014/02/19 职场文书
医学求职自荐信
2014/06/21 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
开票证明
2015/06/23 职场文书
法定代表人免职证明
2015/06/24 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫