技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

使用jQuery setInterval函數延遲5秒后跳轉到另一個頁面

作者:admin    時間:2019-5-8 11:19:31    瀏覽:

本文將介紹如何使用jQuery延遲一段時間(比如3秒或5秒)后跳轉到另一個頁面。

使用Query延遲一段時間后,JavaScript setInterval()函數將用于跳轉到另一個頁面。

使用jQuery延遲5秒后跳轉到另一個頁面

使用jQuery延遲5秒后跳轉到另一個頁面

使用jQuery延遲5秒后重定向到另一個頁面

以下HTML標記由一個button和一個DIV組成,這個DIV包含一個用于顯示倒計時計時器的SPAN元素。

另外為button分配了一個用來實現跳轉的jQuery單擊事件處理程序。

<input type="button" id="btnRedirect" value="Redirect" />
<br />
<br />
<div id="dvCountDown" style="display: none">
你將在 <span id="lblCount"></span> 秒后跳轉。
</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://www.kpgnf.tw/";
      }
    }, 1000);
  }, );
}, );
</script>

在此單擊事件處理程序內,JavaScript setInterval()函數被初始化為每1000毫秒執行一次,即每一秒執行一次。

每次執行JavaScript setInterval()函數時,它首先遞減seconds變量的值,然后在倒數計時器HTML SPAN中顯示其值,當seconds變量的值為0時,倒計時計時器結束,頁面跳轉到另一個頁面。

效果如圖

使用jQuery延遲5秒后跳轉到另一個頁面

使用jQuery延遲5秒后跳轉到另一個頁面

execcodegetcode

標簽: JQuery  跳轉  重定向  setInterval  
  • IT熱文
  • 站長推薦
财神捕鱼128 网上棋牌赌钱必赢法 11选5私彩代理怎么赚钱 贵州茅台股票走势 吉林十一选五遗漏号码 36选7走势图 重庆幸运农场计划 陕西11选5推荐 组选奖号401前后关系 幸运赛车奖金 金牛棋牌手机版下载