5秒后跳转效果(setInterval/SetTimeOut)

更新时间：2013年05月03日 16:17:55 作者：

实现5秒后自动跳转效果有两种方式setInterval与SetTimeOut，具体实现如下，感兴趣的朋友可以参考下

setInterval版

 
$(function () { 
setInterval(function () { 
var time = $("#time").text(); 
time = parseInt(time); 
time--; 
if (time >0) { 
$("#time").text(time); 
} else { 
window.location = $("#url").attr("href"); 
} 
}, 1000); 
}); 

SetTimeOut版

复制代码代码如下:

 
<script type="text/javascript"> 
window.onload = function () { 
setTimeout(changeTime, 1000); 
} 
function changeTime() { 
var time = document.getElementById("time").innerHTML; 
time = parseInt(time); 
time--; 
if (time <= 0) { 
var url = document.getElementById("url").href; 
window.location = url; 
} else { 
document.getElementById("time").innerHTML= time; 
setTimeout(changeTime, 1000); 
} 
} 
</script> 

html

复制代码代码如下:

 
<span style="font-size: 18px; color: Red" id="time">5</span>秒钟以后跳转到 <a href="<%=this.url %>" 

您可能感兴趣的文章:

JS+CSS实现的拖动分页效果实例
这篇文章主要介绍了JS+CSS实现的拖动分页效果,可实现鼠标拖动页面翻转到上一页或下一页的功能,涉及javascript操作页面元素与css样式的相关技巧,需要的朋友可以参考下
2015-05-05
JavaScript 错误捕获与处理的完整指南
在JavaScript中捕获错误通常有四种方式,try-catch 语句块,Promise 的 catch 方法,throw 语句以及window.onerror事件处理程序,并通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
2024-02-02
JavaScript定时器详解及实例
这篇文章详细介绍了JavaScript定时器及实例，有需要要的朋友可以参考一下
2013-08-08
一张Web前端的思维导图分享
这篇文章主要介绍了一张Web前端的思维导图分享,本文直接给出思维导图,图中详细描述了一些需要学习的知识、一些必备的知识,需要的朋友可以参考下
2015-07-07
简单了解JS打开url的方法
这篇文章主要介绍了简单了解JS打开url的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
js中易弄混淆的"位置"相关属性详解
js中有各种位置相关的属性,平时用起来比较混乱,特此整理一下,下面这篇文章主要给大家介绍了关于js中易弄混淆的“位置”相关属性的相关资料,需要的朋友可以参考下
2022-04-04
原生js实现查找/添加/删除/指定元素的class
查找、添加、删除、指定元素的class使用原生js实现不可思议吧，感兴趣的朋友可以参考下哈，希望可以帮助到你
2013-04-04
eval的两组性能测试数据
最近对eval火爆的讨论，教主 @Franky 和灰大 @otakustay 也给了精彩的数据分析,刚好之前也做过类似的测试，我也跟风凑个热闹，提供两组数据供大家参考
2012-08-08
重构Javascript代码示例(重构前后对比)
回顾头来看看那些Javascript脚本，有写得不太理想，过于复杂。现抽取出来，重构它们,想学习javascript重构的朋友可以参考下啊，网本文可以帮助你的
2013-01-01
一篇文章带你从零快速上手Rollup
这篇文章主要给大家介绍了如何通过一篇文章快速从零快速上手Rollup的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09