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 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
简单实现js倒计时功能
Feb 13 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 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服务器实现多session并发运行
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php实现httpRequest的方法
2015/03/13 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
vue组件间通信解析
2017/03/01 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
作文批改评语大全
2014/04/23 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
感谢信范文大全
2015/01/23 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
少年犯观后感
2015/06/11 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android