Javascript倒計時是我們在web開發中非常常見的功能,比如我們在網上購物時看到的秒殺活動,或者熱門旅游產品的搶購等等,都可以用倒計時來提醒用戶時間的緊迫性。然而,在一些特殊的情況下,我們可能需要在規定時間內停止倒計時,比如秒殺活動結束或者旅游產品售罄,這時候就要用到Javascript倒計時停止的功能。
首先,我們來看一個簡單的Javascript倒計時的例子:
<div id="countdown"></div> <script> // 設置倒計時結束時間,這里以秒為單位 var end_time = 1599864000; function countdown() { var now = new Date().getTime() / 1000; var distance = end_time - now; var days = Math.floor(distance / (60 * 60 * 24)); var hours = Math.floor((distance % (60 * 60 * 24)) / (60 * 60)); var minutes = Math.floor((distance % (60 * 60)) / 60); var seconds = Math.floor(distance % 60); document.getElementById("countdown").innerHTML = days + "天 " + hours + "小時 " + minutes + "分 " + seconds + "秒 "; // 每秒刷新一次倒計時 setTimeout(function() { countdown(); }, 1000); } countdown(); </script>
這是一個簡單的倒計時功能,通過獲取當前時間和結束時間的差值,來計算出還剩下多少時間,并將倒計時展示在頁面上。其中,setTimeout函數用來每秒刷新一次頁面上的倒計時。
接下來,我們來看一下如何在特定情況下停止倒計時。
首先,我們需要在Javascript中創建一個倒計時對象,來管理倒計時的狀態:
var countdown_timer = { // 截止時間 end_time: 0, // 倒計時定時器 timer: null, // 初始化 init: function(end_time) { this.end_time = end_time; this.start_countdown(); }, // 開始倒計時 start_countdown: function() { var self = this; function countdown() { var now = new Date().getTime() / 1000; var distance = self.end_time - now; if (distance < 0) { self.stop_countdown(); return; } var days = Math.floor(distance / (60 * 60 * 24)); var hours = Math.floor((distance % (60 * 60 * 24)) / (60 * 60)); var minutes = Math.floor((distance % (60 * 60)) / 60); var seconds = Math.floor(distance % 60); document.getElementById("countdown").innerHTML = days + "天 " + hours + "小時 " + minutes + "分 " + seconds + "秒 "; self.timer = setTimeout(function() { countdown(); }, 1000); } countdown(); }, // 停止倒計時 stop_countdown: function() { clearTimeout(this.timer); alert("搶購已結束!"); } }; countdown_timer.init(1599864000);
在這里,我們建立了倒計時對象countdown_timer,它擁有三個方法:
- init方法用來初始化倒計時對象,接受一個截止時間參數,然后啟動倒計時功能;
- start_countdown方法是倒計時的核心方法,它計算當前時間和截止時間的時間差,并根據時間差來更新倒計時展示,同時每秒通過setTimeout來刷新倒計時;
- stop_countdown方法是用來停止倒計時的方法,它清除之前的setTimeout定時器,同時提示搶購已結束。
當倒計時的時間差小于0時,我們就可以調用stop_countdown方法來停止倒計時。請注意,在上面的例子中,我們使用了alert來提示用戶搶購已結束,事實上,在實際開發中,我們可能需要通過其他的方式來提示用戶。
總結一下,Javascript倒計時是非常實用的功能,在一些特殊情況下,我們需要停止倒計時,可以通過創建倒計時對象,并在倒計時對象中添加停止倒計時的方法來實現。這樣,在搶購結束或者旅游產品售罄時,我們就可以停止倒計時,并提示用戶相應的信息。
上一篇css樣式鼠標變為手勢
下一篇css樣式適應屏幕代碼