jQuery/Javascript make 倒计时回调-解网

问：

我有jquery倒计时函数，代码如下：

$.fn.countdown = function(toTime, callback){
                    let $el = $(this);
                    var intervalId;
                    
                    let timeUpdate = () => {
                        var now = new Date().getTime();
                        var distance = toTime - now;

                        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                    
                        if(distance < 0){
                            clearInterval(intervalId);
                        }
                        else{
                            var value = days + "<sup>d</sup> " + (hours > 9 ? hours : '0' + hours) + ":" +  (minutes > 9 ? minutes : '0' + minutes) + ":" +  (seconds > 9 ? seconds : '0' + seconds);
                            $el.html(value);
                        }
                        
                        if(callback) callback();
                    }
                  
                    timeUpdate();
                    intervalId = setInterval(timeUpdate, 1000);
                };
        
$('#my_div').countdown(new Date("Jun 23, 2022 22:37:25").getTime());

$('#my_div2').countdown(new Date("Jun 23, 2022 22:20:25").getTime());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="my_div"></div>

<div id="my_div2"></div>

现在，如果时间已结束，我需要添加回调函数。我的想法是这样的：

$('#my_div').countdown(new Date("Jun 23, 2022 22:37:25").getTime(), function(){
    callback: function() {
        alert("Counting Finish");
    }
});

有什么方法可以实现该回调吗？

JavaScript jQuery 回调

$.fn.countdown = function(toTime, callback) {
  let $el = $(this);
  var intervalId;

  let timeUpdate = () => {
    var now = new Date().getTime();
    var distance = toTime - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    if (distance < 0) {
      clearInterval(intervalId);
      callback && callback();
    } else {
      var value = days + "<sup>d</sup> " + (hours > 9 ? hours : '0' + hours) + ":" + (minutes > 9 ? minutes : '0' + minutes) + ":" + (seconds > 9 ? seconds : '0' + seconds);
      $el.html(value);
    }
  }

  timeUpdate();
  intervalId = setInterval(timeUpdate, 1000);
};

var date1 = new Date();
date1.setSeconds(date1.getSeconds() + 5);
$('#my_div').countdown(date1.getTime(), () => console.log('first countdown elapsed!'));

var date2 = new Date();
date2.setSeconds(date2.getSeconds() + 10);
$('#my_div2').countdown(date2.getTime(), () => console.log('second countdown elapsed!'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="my_div"></div>

<div id="my_div2"></div>

jQuery/Javascript make 倒计时回调

jQuery/Javascript make callback for countdown

评论

评论