jQuery是一款廣泛應用于前端開發的JavaScript庫,它提供了豐富的API,方便我們在頁面中實現各種交互效果。其中,倒計時是應用jquery的一個非常實用的功能。下面我們來介紹一下如何使用jquery實現倒計時。
$(function() { var countDownDate = new Date("Sep 30, 2021 00:00:00").getTime(); var x = setInterval(function() { var now = new Date().getTime(); var distance = countDownDate - now; var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); $("#countdown").html(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); if (distance< 0) { clearInterval(x); $("#countdown").html("EXPIRED"); } }, 1000); });
以上代碼實現了一個簡單的倒計時,它首先定義了倒計時的結束時間,然后通過setInterval()函數每隔一秒鐘計算與結束時間之間的時間差,最后將時間差轉換成天、小時、分鐘和秒,并將結果顯示在頁面上的指定元素中。如果倒計時已經完成,程序會清除計時器并在頁面上顯示“EXPIRED”。
通過以上的方法,我們可以輕松實現倒計時的功能,使用jquery框架可以讓我們代碼更加清晰、簡潔,省去繁瑣的DOM操作。
上一篇jquery 倒數60秒
下一篇jquery 停止循環