问题描述
我正在使用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';
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。 接下来，我们将使用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);
以下是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;
...
}
例如，要将前导零添加到"秒"值，您需要更改以下内容：
secondsSpan.innerHTML = t.seconds;
至此：
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
如果您愿意，您还可以在分钟和小时中添加前导零。如果你已经走到这一步，恭喜你！您的时钟现在可以显示了。
注意：您可能必须单击CodePen中的"重新运行"才能开始倒计时。
这篇关于如何计算到达某一天所剩的时间(以天、小时、分钟和秒为单位)？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！