卡卡網(wǎng)

本文將介紹如何使用jQuery延遲一段時(shí)間（比如3秒或5秒）后跳轉(zhuǎn)到另一個(gè)頁(yè)面。

使用Query延遲一段時(shí)間后，JavaScript setInterval()函數(shù)將用于跳轉(zhuǎn)到另一個(gè)頁(yè)面。

使用jQuery延遲5秒后跳轉(zhuǎn)到另一個(gè)頁(yè)面

使用jQuery延遲5秒后重定向到另一個(gè)頁(yè)面

以下HTML標(biāo)記由一個(gè)button和一個(gè)DIV組成，這個(gè)DIV包含一個(gè)用于顯示倒計(jì)時(shí)計(jì)時(shí)器的SPAN元素。

另外為button分配了一個(gè)用來(lái)實(shí)現(xiàn)跳轉(zhuǎn)的jQuery單擊事件處理程序。

<input type="button" id="btnRedirect" value="Redirect" />
<br />
<br />
<div id="dvCountDown" style="display: none">
你將在 <span id="lblCount"></span> 秒后跳轉(zhuǎn)。
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
  $("#btnRedirect").click(function () {
    var seconds = 5;
    $("#dvCountDown").show();
    $("#lblCount").html(seconds);
    setInterval(function () {
      seconds--;
      $("#lblCount").html(seconds);
      if (seconds == 0) {
        $("#dvCountDown").hide();
        window.location = "http://howtostagehomes.com/";
      }
    }, 1000);
  }, );
}, );
</script>

在此單擊事件處理程序內(nèi)，JavaScript setInterval()函數(shù)被初始化為每1000毫秒執(zhí)行一次，即每一秒執(zhí)行一次。

每次執(zhí)行JavaScript setInterval()函數(shù)時(shí)，它首先遞減seconds變量的值，然后在倒數(shù)計(jì)時(shí)器HTML SPAN中顯示其值，當(dāng)seconds變量的值為0時(shí)，倒計(jì)時(shí)計(jì)時(shí)器結(jié)束，頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面。

效果如圖

使用jQuery延遲5秒后跳轉(zhuǎn)到另一個(gè)頁(yè)面

execcodegetcode

標(biāo)簽: JQuery  跳轉(zhuǎn)  重定向  setInterval