javascript实现倒计时跳转页面
更新时间：2022年07月28日 23:30:27 投稿：hebedich
本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理，非常的简单实用，有需要的小伙伴可以参考下。
很多网页都有类似的效果，那就是经过指定的时间能够跳转到其他页面，如果再人性化一点话，会带有倒计时效果，本章节就介绍一下如何实现此效果，代码实例如下:
<script type="text/javascript">
var t=10;
setInterval("refer()",1000);
function refer(){
if(t==0){
location.href="//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.location.href可以参阅Location对象的href属性一章节。
3.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
下面给大家分享2个简单的跳转代码，做一下总结，各种定时跳转代码记录如下：
（1）使用setTimeout函数实现定时跳转（如下代码要写在body区域内）
<script type="text/javascript"> //3秒钟之后跳转到指定的页面 setTimeout(window.location.href='//www.jb51.net',3); </script>
（2）html代码实现，在页面的head区域块内加上如下代码
<!--5秒钟后跳转到指定的页面--> <meta http-equiv="refresh" content="5;url=//www.jb51.net" />
看到这里脚本之家再为大家分享一个不错的代码
<div id="num"></div>
<script type="text/javascript">
var num=5;
function redirect(){
num--;
document.getElementById("num").innerHTML=num;
if(num<0){
document.getElementById("num").innerHTML=0;
location.href="//www.jb51.net/";
}
}
setInterval("redirect()", 1000);
</script>以上就是javascript实现倒计时跳转页面的详细内容，更多关于javascript实现倒计时跳转页面的资料请关注脚本之家其它相关文章！
相关文章
本文主要给大家分享了javascript中Math()函数的注意事项，以及math对象的方法，十分的简单实用，有需要的小伙伴可以参考下2015-06-06
typeof 在js中typeof是检查类型的,在ts中也有这个功能,下面这篇文章主要给大家介绍了关于TypeScript基本类型之typeof和keyof的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了JavaScript简单实现动态改变HTML内容的方法,结合实例形式分析了javascript简单获取及修改HTML元素的相关操作技巧,非常简单易懂,需要的朋友可以参考下2018-12-12
本文总结了"异步模式"编程的4种方法，理解它们可以让你写出结构更合理、性能更出色、维护更方便的Javascript程序2013-01-01
这篇文章主要介绍了微信小程序如何实现五星评价功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了使用jquery解析XML的方法,代码简洁实用,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了JavaScript中的异常捕捉介绍,本文讲解了throw语句抛出异常,try/catch/finally语句捕捉异常,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了使用js实现瀑布流效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
20分钟打造属于你的Bootstrap站点，学会使用twitter bootstrap建立一个站点，从而巩固Bootstrap一系列基础知识，感兴趣的小伙伴们可以参考一下2016-07-07
webpack打包后index.html引用文件地址问题小结
在前端开发中,src 属性指定的相对路径是相对于当前 HTML 文件的路径,而不是相对于网站的根目录,这篇文章主要介绍了webpack打包后index.html引用文件地址问题,需要的朋友可以参考下2024-05-05
最新评论