Jquery Countdown 是一個非常實用的倒計時插件,可以幫助我們在網站開發中實現倒計時的功能。但是,有時候我們的需求是需要在一定條件下停止倒計時,那么該如何實現呢?
下面是一個示例代碼:
<!DOCTYPE html> <html> <head> <title>Jquery Countdown 停止</title> </head> <body> <div> <p>倒計時結束時間:</p> <input type="text" id="endDate" value="2021/06/30 15:00:00" /> </div> <div> <p>距離結束時間還有:</p> <span id="countdown"></span> </div> <div> <button id="stopBtn">停止倒計時</button> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.countdown/2.2.0/jquery.countdown.min.js"></script> <script> $(function() { var endDate = $('#endDate').val(); $('#countdown').countdown(endDate, function(event) { $(this).html(event.strftime('%D 天 %H 時 %M 分 %S 秒')); }); $('#stopBtn').click(function() { $('#countdown').countdown('stop'); }); }); </script> </body> </html>
如上代碼所示,我們通過獲取倒計時結束時間,并使用 Jquery Countdown 插件倒計時,在頁面中展示距離結束時間還有多久。另外,我們在頁面中加入了一個停止倒計時的按鈕,當用戶點擊該按鈕時,我們調用插件的 stop 方法,即可停止倒計時。
總的來說,Jquery Countdown 停止功能的實現還是比較簡單的,只需要在需要停止計時的地方加上停止操作即可。