使用 JQuery 倒计时答案

【问题标题】：Count Up timer with JQuery使用 JQuery 倒计时
【发布时间】：2020-04-07 19:52:06
【问题描述】：

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

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

HTML 代码

<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 代码

$('.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>'));
        });
    });

【问题讨论】：

countdown() 不是 jQuery 函数

标签： javascript jquery jquery-countdown

【解决方案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>

【讨论】：