使用JQuery计数计时器

Question

我有倒数计时器，它很好。我正在尝试将其转换为计数计时器。我对这项任务感到困惑。

我经历了很多方法，但不是确切的答案。

网页代码

<div class="tk_countup_time p-0 transparent_bg box_shadow_none animation" data-animation="fadeInUp" data-animation-delay="1.2s" data-time="2025/02/28 00:00:00"></div>

JQuery Code

$('.tk_countup_time').each(function() {
var endTime = $(this).data('time');
$(this).countdown(endTime, function(tm) {
$(this).html(tm.strftime('<span class="counter_box"><span class="tk_counter days">%D </span><span class="tk_text">Days</span></span><span class="counter_box"><span class="tk_counter hours">%H</span><span class="tk_text">Hours</span></span><span class="counter_box"><span class="tk_counter minutes">%M</span><span class="tk_text">Minutes</span></span><span class="counter_box"><span class="tk_counter seconds">%S</span><span class="tk_text">Seconds</span></span>'));
});
});

Answer 1

假设您正在使用 jQuery 倒计时，您可以设置elapse:true，以便它在达到零后继续计数，而不是将完成时间设置为当前日期，因此它立即开始计数。

let now = new Date().getTime();
$('#clock').countdown(now, {elapse: true})
.on('update.countdown', function(event) {
var $this = $(this);
$this.html(event.strftime('Counting Up: <span>%H:%M:%S</span>'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
<div id="clock"></div>