5秒后跳轉(zhuǎn)效果(setInterval/SetTimeOut)
更新時(shí)間：2013年05月03日 16:17:55 作者：
實(shí)現(xiàn)5秒后自動(dòng)跳轉(zhuǎn)效果有兩種方式setInterval與SetTimeOut，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下
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>秒鐘以后跳轉(zhuǎn)到 <a href="<%=this.url %>"
復(fù)制代碼 代碼如下:
$(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版
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
<span style="font-size: 18px; color: Red" id="time">5</span>秒鐘以后跳轉(zhuǎn)到 <a href="<%=this.url %>"
相關(guān)文章
JS+CSS實(shí)現(xiàn)的拖動(dòng)分頁(yè)效果實(shí)例
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的拖動(dòng)分頁(yè)效果,可實(shí)現(xiàn)鼠標(biāo)拖動(dòng)頁(yè)面翻轉(zhuǎn)到上一頁(yè)或下一頁(yè)的功能,涉及javascript操作頁(yè)面元素與css樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
在JavaScript中捕獲錯(cuò)誤通常有四種方式,try-catch 語(yǔ)句塊,Promise 的 catch 方法,throw 語(yǔ)句以及window.onerror事件處理程序,并通過(guò)代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章詳細(xì)介紹了JavaScript定時(shí)器及實(shí)例，有需要要的朋友可以參考一下2013-08-08
這篇文章主要介紹了一張Web前端的思維導(dǎo)圖分享,本文直接給出思維導(dǎo)圖,圖中詳細(xì)描述了一些需要學(xué)習(xí)的知識(shí)、一些必備的知識(shí),需要的朋友可以參考下2015-07-07
這篇文章主要介紹了簡(jiǎn)單了解JS打開(kāi)url的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
js中有各種位置相關(guān)的屬性,平時(shí)用起來(lái)比較混亂,特此整理一下,下面這篇文章主要給大家介紹了關(guān)于js中易弄混淆的“位置”相關(guān)屬性的相關(guān)資料,需要的朋友可以參考下2022-04-04
原生js實(shí)現(xiàn)查找/添加/刪除/指定元素的class
查找、添加、刪除、指定元素的class使用原生js實(shí)現(xiàn)不可思議吧，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
最近對(duì)eval火爆的討論，教主 @Franky 和 灰大 @otakustay 也給了精彩的數(shù)據(jù)分析,剛好之前也做過(guò)類似的測(cè)試，我也跟風(fēng)湊個(gè)熱鬧，提供兩組數(shù)據(jù)供大家參考2012-08-08
重構(gòu)Javascript代碼示例(重構(gòu)前后對(duì)比)
回顧頭來(lái)看看那些Javascript腳本，有寫得不太理想，過(guò)于復(fù)雜?，F(xiàn)抽取出來(lái)，重構(gòu)它們,想學(xué)習(xí)javascript重構(gòu)的朋友可以參考下啊，網(wǎng)本文可以幫助你的2013-01-01
這篇文章主要給大家介紹了如何通過(guò)一篇文章快速?gòu)牧憧焖偕鲜諶ollup的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09