如何计算到达某一天所剩的时间(以天、小时、分钟和秒为单位)？ [英] How to calculate the time left in days, hours, minutes, and seconds left to reach certain day?

问题描述

我正在使用Moment.js检索下周五(moment().day(5).format();)，它工作成功并将2020-06-26T13:19:01+04:00打印到控制台

现在我想显示一个倒计时计时器，表示到达该特定日期还剩多长时间，倒计时包括剩余的时间(以天、小时、分钟和秒为单位)：

如何以天、时、分、秒为单位计算到达特定日期的剩余时间？

推荐答案

设置有效的结束日期 首先，您需要设置有效的结束日期。它应该是JavaScript的Date.parse()方法能够理解的任何格式的字符串。例如：

const deadline = '2015-12-31';

缩写：

const deadline = '31/12/2015';

或长格式：

const deadline = 'December 31 2015';

这些格式中的每一种都允许您指定准确的时间和时区(如果是ISO日期，则指定与UTC的偏移量)。例如：

const deadline = 'December 31 2015 23:59:59 GMT+0200';

计算剩余时间 下一步是计算剩余时间。我们需要编写一个函数，该函数接受表示给定结束时间的字符串(如上所述)。然后，我们计算该时间与当前时间之间的差值。看起来是这样的：

 function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

首先，我们创建一个变量Total，将剩余时间保存到截止日期。函数的作用是：将时间字符串转换为以毫秒为单位的值。这使我们可以互相减去两次，得到两者之间的时间量。

const total = Date.parse(endtime) - Date.parse(new Date());

将时间转换为可用的格式 现在，我们要将毫秒转换为天、小时、分钟和秒。以秒为例：

const seconds = Math.floor( (t/1000) % 60 );

让我们分析一下这里发生的事情。

1. 毫秒除以1000换算为秒：(t/1000)
2. 将总秒数除以60，取余数。您不想要所有秒数，只想要计分后剩余的秒数：(T/1000)%60
3. 将此向下舍入为最接近的整数。这是因为您需要完整的秒数，而不是秒的分数：Math.Floor((t/1000)%60)

重复此逻辑以将毫秒转换为分钟、小时和天。

将时钟数据作为可重用对象输出

准备好日、小时、分钟和秒后，我们现在可以将数据作为可重用对象返回：

return {
  total,
  days,
  hours,
  minutes,
  seconds
};

此对象允许您调用函数并获取任何计算值。以下是如何获得剩余分钟的示例：

getTimeRemaining(deadline).minutes

方便，对吗？

.. 显示时钟并在达到零时停止

现在我们有了一个函数，可以显示剩余的天数、小时数、分钟数和秒数，我们可以构建时钟了。首先，我们将创建以下HTML元素来保存时钟：

<div id="clockdiv"></div>

然后我们将编写一个函数，在新div：

中输出时钟数据

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const timeinterval = setInterval(() => {
    const t = getTimeRemaining(endtime);
    clock.innerHTML = 'days: ' + t.days + '<br>' +
                      'hours: '+ t.hours + '<br>' +
                      'minutes: ' + t.minutes + '<br>' +
                      'seconds: ' + t.seconds;
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  },1000);
}

此函数接受两个参数。这些是包含时钟的元素的id，以及倒计时的结束时间。在函数内部，我们将声明一个时钟变量，并使用它存储对时钟容器div的引用。这意味着我们不必一直查询DOM。 接下来，我们将使用setInterval每秒执行一个匿名函数。此函数将执行以下操作：

计算剩余时间。 将剩余时间输出到我们的div。 如果剩余时间为零，请停止时钟。

此时，剩下的唯一步骤是运行时钟，如下所示：

initializeClock('clockdiv', deadline);

恭喜！现在，您只需18行JavaScript即可获得一个基本时钟。

准备好时钟以进行显示 在设计时钟样式之前，我们需要稍微改进一下。

删除初始延迟，以便您的时钟立即显示。 提高时钟脚本的效率，这样它就不会不断地重新构建整个时钟。 根据需要添加前导零。

删除初始延迟 在时钟中，我们使用setInterval每秒更新显示。这在大多数情况下都是可以的，除了在开始时会有一秒的延迟。若要消除此延迟，我们必须在间隔开始之前更新时钟一次。

让我们将传递给setInterval的匿名函数移到它自己的单独函数中。我们可以将此函数命名为updateClock。在setInterval外部调用一次updateClock函数，然后在setInterval内部再次调用它。这样，时钟就会在没有延迟的情况下出现。

在JavaScript中，替换为：

const timeinterval = setInterval(() => { ... },1000);

使用此选项：

function updateClock(){
  const t = getTimeRemaining(endtime);
  clock.innerHTML = 'days: ' + t.days + '<br>' +
                    'hours: '+ t.hours + '<br>' +
                    'minutes: ' + t.minutes + '<br>' +
                    'seconds: ' + t.seconds;
  if (t.total <= 0) {
    clearInterval(timeinterval);
  }
}

updateClock(); // run function once at first to avoid delay
var timeinterval = setInterval(updateClock,1000);

避免连续重建时钟 我们需要提高时钟脚本的效率。我们只想更新时钟中的数字，而不是每秒重建整个时钟。实现此目的的一种方法是将每个数字放入SPAN标记中，并且仅更新这些跨度的内容。

以下是HTML：

<div id="clockdiv">
    Days: <span class="days"></span><br>
    Hours: <span class="hours"></span><br>
    Minutes: <span class="minutes"></span><br>
    Seconds: <span class="seconds"></span>
</div>

现在让我们获取对这些元素的引用。在定义时钟变量的位置后面添加以下代码

const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');

接下来，我们需要更改updateClock函数以仅更新数字。新代码将如下所示：

function updateClock(){
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = t.hours;
    minutesSpan.innerHTML = t.minutes;
    secondsSpan.innerHTML = t.seconds;

    ...
}

添加前导零 现在时钟不再每秒重建一次，我们还有一件事要做：添加前导零。例如，时钟显示的不是7秒，而是07秒。要做到这一点，一种简单的方法是在数字的开头添加字符串"0"，然后切下最后两位数字。

例如，要将前导零添加到"秒"值，您需要更改以下内容：

secondsSpan.innerHTML = t.seconds;

至此：

secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

如果您愿意，您还可以在分钟和小时中添加前导零。如果你已经走到这一步，恭喜你！您的时钟现在可以显示了。

注意：您可能必须单击CodePen中的"重新运行"才能开始倒计时。

这篇关于如何计算到达某一天所剩的时间(以天、小时、分钟和秒为单位)？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！