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 相关文章推荐
window.print打印指定div实例代码
Dec 13 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
使用D3.js制作图表详解
Aug 13 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
js实现鼠标点击飘爱心效果
Aug 19 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
做个自己站内搜索引擎
2006/10/09 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
PHP 裁剪图片
2021/03/09 PHP
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现公司年会抽奖程序
2019/01/22 Python
python机器学习库xgboost的使用
2020/01/20 Python
python 如何上传包到pypi
2020/12/24 Python
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
Python如何实现单例模式
2016/06/03 面试题
优秀管理者获奖感言
2014/02/17 职场文书
领导失职检讨书
2014/02/24 职场文书
白血病捐款倡议书
2014/05/14 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
华清池导游词
2015/02/02 职场文书
观后感开头
2015/06/19 职场文书
回复函范文
2015/07/14 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android