怎么计算到达某一天所剩的时间(以天、小时、分钟和秒为单位)?

本教程将介绍如何计算到达某一天所剩的时间(以天、小时、分钟和秒为单位)?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

怎么计算到达某一天所剩的时间(以天、小时、分钟和秒为单位)? 教程 第1张

问题描述

我正在使用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 );

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

    毫秒除以1000换算为秒:(t/1000)

    将总秒数除以60,取余数。您不想要所有秒数,只想要计分后剩余的秒数:(T/1000)%60

    将此向下舍入为最接近的整数。这是因为您需要完整的秒数,而不是秒的分数: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。
接下来,我们将使用每秒执行一个匿名函数。此函数将执行以下操作:

计算剩余时间。
将剩余时间输出到我们的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中的"重新运行"才能开始倒计时。

好了关于怎么计算到达某一天所剩的时间(以天、小时、分钟和秒为单位)?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。