手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript实现倒计时跳转页面
javascript实现倒计时跳转页面
摘要:很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果再人性化一点话,会带有倒计时效果,本章节就介绍一下如何实现此效果,代码实...

很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果再人性化一点话,会带有倒计时效果,本章节就介绍一下如何实现此效果,代码实例如下:

<script type="text/javascript"> var t=10; setInterval("refer()",1000); function refer(){ if(t==0){ location.href="http://www.jb51.net"; } 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='http://www.jb51.net',3); </script>

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

<> <meta http-equiv="refresh" content="5;url=http://www.jb51.net" />

【javascript实现倒计时跳转页面】相关文章:

JavaScript实现斗地主游戏的思路

javascript 动态添加表格行

javascript的 {} 语句块详解

javascript基于DOM实现省市级联下拉框的方法

纯javascript制作日历控件

javascript实现设置、获取和删除Cookie的方法

Javascript实现div层渐隐效果的方法

JavaScript中数组添加值和访问值常见问题

基于JavaScript实现智能右键菜单

javascript实现Table排序的方法

精品推荐
分类导航