Javascript时间计数器向后运行答案

【问题标题】：Javascript time counter running backwardsJavascript时间计数器向后运行
【发布时间】：2020-04-03 09:32:42
【问题描述】：

大家好，我有一个计时器，我想从 15 计数到 0。但在当前版本中，它从 0 计数到 15。它应该倒着运行。有什么建议吗？

  // Set the minutes
  var countDownMins = new Date().getMinutes() + 15;

  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get current time
    var now = new Date().getTime();

    var distance =  now + countDownMins;

    mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    secs = Math.floor((distance % (1000 * 60)) / 1000);        

    // Output the results
    document.getElementById("minutes").innerHTML = mins;
    document.getElementById("seconds").innerHTML = secs;

    if (mins < 0) {
      clearInterval(x);
    }

  }, 1000);

【问题讨论】：

var distance = now + countDownMins; 应该做什么？
@JonasWilms 我在这里计算我们需要计数的计时器和当前时间之间的距离
为什么不简单地创建一个开始时间的日期时间和结束时间的项目一个，在间隔之外，然后在间隔中使用结束日期时间和日期方法来区分它们与现在?让语言完成工作stackoverflow.com/questions/1968167/…
@developer 我是 javascript 新手。可以举个例子吗？
示例链接：stackoverflow.com/questions/1968167/…

标签： javascript timer counter

【解决方案1】：

一些小的修改应该可以很好地工作！

您可以像这样将倒数计时器保存到本地存储：

var countDownTarget = localStorage.getItem('countDownTarget');
if (!countDownTarget) {
    countDownTarget = new Date().getTime() + 15 * 60 * 1000;;
    localStorage.setItem('countDownTarget', countDownTarget);
}

var countDownTarget = new Date().getTime() + 15 * 60 * 1000;

function showClock(target) {
    const distance = target - new Date().getTime();
    const mins = distance < 0 ? 0: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const secs = distance < 0 ? 0: Math.floor((distance % (1000 * 60)) / 1000);        

    // Output the results
    document.getElementById("minutes").innerHTML = mins;
    document.getElementById("seconds").innerHTML = secs;
}

showClock(countDownTarget);

// Update the count down every 1 second
var x = setInterval(function() {
    showClock(countDownTarget);
    if (countDownTarget - new Date().getTime() < 0) {
        clearInterval(x);
    }
}, 1000);

Minutes: <b id="minutes"></b>
Seconds: <b id="seconds"></b>

【讨论】：

这可行，但问题在于重新加载它会重置计时器。前一个不会在重新加载时重置。有什么建议吗？
如果您希望计时器在重新加载时不重置，则必须将初始计时器值（countDownTarget）存储到本地存储或其他一些非易失性存储介质，然后检查是否这样存在价值。如果是，请继续倒计时。

【解决方案2】：

试试这个方法

// Set the minutes
var countDownMins = new Date().getTime() + (1000 * 60 * 15);

// Update the count down every 1 second
var x = setInterval(function() {

 // Get current time
 var now = new Date().getTime();

 var distance = countDownMins - now;

 mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
 secs = Math.floor((distance % (1000 * 60)) / 1000);        

 // Output the results
 document.getElementById("minutes").innerHTML = mins;
 document.getElementById("seconds").innerHTML = secs;

 if (mins < 0) {
   clearInterval(x);
 }

}, 1000);

【讨论】：