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 停止功能的实现还是比较简单的,只需要在需要停止计时的地方加上停止操作即可。