淘先锋技术网

首页 1 2 3 4 5 6 7

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