主页 / 网络编程 /

javascript实现倒计时跳转页面

网络编程 2021-07-04 21:04www.168986.cn编程入门
本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理，非常的简单实用，有需要的小伙伴可以参考下。
很多网页都有类似的效果，那就是经过指定的时间能够跳转到其他页面，如果再人性化一点话，会带有倒计时效果，本章节就介绍一下如何实现此效果，代码实例如下:

<script type="text/javascript"> 
var t=10;
setInterval("refer()",1000); 
function refer(){ 
 if(t==0){ 
 location.href="https://.jb51.";
 } 
 document.getElementById('show').innerHTML=""+t+"秒后跳转到狼蚁SEO";
 t--;
} 
</script> 
<span id="show"></span>
以上代码实现了我们想要的效果，能够在10秒之后跳转到指定页面，狼蚁网站SEO优化介绍一下实现过程。
一.实现原理:
原理非常的简单，就是利用setInterval()定时器函数，每秒执行一次refer()函数，此函数能够没执行一次将t减1，将当前的t的值写入div中，如果t减到0,也就是倒计时完毕，就跳转到指定页面。原理大致如此。
二.相关阅读:
1.setInterval()函数可以参阅函数用法详解一章节。
2.location.href可以参阅一章节。
3.innerHTML属性可以参阅js的属性的用法一章节。

狼蚁网站SEO优化给大家分享2个简单的跳转代码，做一下，各种定时跳转代码记录如下

（1）使用setTimeout函数实现定时跳转（如下代码要写在body区域内）

<script type="text/javascript"> 
//3秒钟之后跳转到指定的页面 
setTimeout(window.location.href='https://.jb51.',3); 
</script>

（2）html代码实现，在页面的head区域块内加上如下代码

<!--5秒钟后跳转到指定的页面--> 
<meta http-equiv="refresh" content="5;url=https://.jb51." />

上一篇：Validform+layer实现漂亮的表单验证特效 下一篇：jQuery实现图片走马灯效果的原理分析

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by