纯Javascript倒数计时器(Vanilla.js)

Question

我有以下两个功能：

// COUNTDOWN TIMER FUNCTION
function refillTimer(theTime) {
  var timer = new Date().getTime() + theTime;
  $('#refillTimer').countdown(timer).on('update.countdown', function(event) {
    $(this).show();
    var $this = $(this);
    if(event.elapsed){
      $this.html(event.strftime('0:0:0'));
    }else{
      $this.html(event.strftime('<strong>%S</strong>'));
    }
  }).on('finish.countdown', function(){
    $(this).hide();
  });
}

// ON SWIPE PERFORM ACTION
async function swipeAction(currentElementObj, swipeType) {
  var cardId = currentElementObj.getAttribute("value");
  var dataString = {
    card: cardId,
    swipe: swipeType
  };
  let response = await new Promise((resolve, reject) => {
    try {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "processes/swipe.php", true);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.responseType = "json";
      xhr.send(JSON.stringify(dataString));
      xhr.onreadystatechange = function () {
        let resObj = xhr.response;
        if(xhr.readyState == 4 && xhr.status == 200 && resObj) {
          $('#content').modal('show');
          refillTimer(resObj.nextswipe); // resObj.nextswipe returns 37000 seconds
        }
      };
    }catch(e){
      reject(e.toString());
    }
  });
}

在上面的代码中，您可以看到我有一个倒数计时器，我正试图在 swipeAction() 函数中使用它。这里的问题是定时器没有按照提供的输入工作。例如，refilTImer(theTime) 函数中作为 theTime 传递的输入是 37000。因此，该函数应花费 37000 秒，将其转换为 HH:MM:SS 并相应地开始倒计时显示。就那么简单。但是，每次通话时，倒数计时器都会从 37 秒开始。秒数过去了 43650，计时器只从 43 秒开始倒计时。我不明白为什么会这样。解决办法是什么？

Answer 1

您正在通过毫秒，而不是秒。

查看您正在使用的函数的定义：

getTime() MDN

number of milliseconds...

并猜测您的插件是 The Final Countdown

finalDate

The target date that you are seeking to countdown. This argument can be one of the following:

A native date object

The milliseconds from Epoch time

Formatted string

显示通过37000是37000毫秒，所以37秒。

纯Javascript倒数计时器(Vanilla.js)

Pure Javascript countdown timer (Vanilla.js)

javascript

ajax

jquery

timer

xmlhttprequest