序

有时，您需要构建一个JavaScript倒计时钟。你可能有活动，销售，促销或游戏。您可以使用原始的JavaScript来构建时钟，而无需寻找最近的插件。虽然有很多很棒的时钟插件，但是使用原始的JavaScript可以带来以下好处:

您的代码将是轻量级的，因为它将具有零依赖性。您的网站将表现更好。您无需加载外部脚本和样式表。您将拥有更多控制权。您将构建时钟，使其行为完全符合您希望的方式（而不是尝试将插件弯曲到您的意愿）。

因此，毫不拖延地，下面就告诉你如何只用18行JavaScript就能制作出自己的倒计时钟。

基本时钟:特定日期或时间的倒计时。

以下是创建一个基本时钟的步骤概述:

设置有效的结束日期。计算剩余时间。将时间转换为可用格式。将时钟数据输出为可重复使用的对象。在页面上显示时钟，并在时钟为零时停止时钟。

设置有效的结束日期。

首先，您需要设置一个有效的结束日期。这应该是JavaScript的Date.parse()方法可以理解的任何格式的字符串。例如:

在ISO 8601格式中:

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';

在本文中，您可以阅读更多关于JavaScript中的日期格式的内容。

计算剩余时间

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

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，以及倒计时的结束时间。在函数内部，我们将声明一个时钟变量，并使用它来存储对时钟容器div的引用。这意味着我们不必一直查询DOM。

接下来，我们将使用setInterval每秒执行一次匿名函数。该功能将执行以下操作:

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

此时，剩下的唯一一步就是像这样运行时钟:

initializeClock('clockdiv', deadline);

恭喜你！现在，您有了一个只有18行JavaScript的基本时钟。

准备显示时钟

在设置时钟样式之前，我们需要做一些改进。

消除初始延迟，使您的时钟立即显示。提高时钟脚本的效率，以免持续重建整个时钟。根据需要添加前导零。

消除初始延迟

在时钟中，我们习惯于按setInterval每秒更新一次显示。在大多数情况下，这是好的，除非在开始时有一秒钟的延迟。为了消除这种延迟，我们必须在间隔开始之前更新一次时钟。

让我们把将要传递给setInterval的匿名函数移到它自己的独立函数中。我们可以将这个函数命名为updateClock。在updateClock外部调用函数setInterval，然后在内部再次调用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 delayvar timeinterval = setInterval(updateClock,1000);

避免连续重建时钟。

我们需要使时钟脚本更加高效。我们只想更新时钟中的数字，而不是每秒重建整个时钟。实现这一点的一种方法是将每个数字放在一个span标记中，然后只更新这些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>

现在让我们参考这些元素。在clock定义变量的位置后添加下面的代码

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中点击“重新运行”来开始倒计时。

进一步地

下面的例子演示了如何为一些用例扩展时钟。都是基于上面看到的基本例子。

自动时钟装置

假设我们希望时钟在某些日子显示，而不是在其他日子。例如，我们可能有一系列事件，不想每次都手动更新时钟。这是提前安排事情的方法。

将其display属性设置为在CSS中隐藏clock none。然后将以下内容添加到initializeClock函数中(在以开头的行后添加var clock)。一旦initializeClock调用此函数，将导致时钟只显示:

clock.style.display = 'block';

接下来，我们可以指定时钟显示的日期。这将替换截止日期变量:

const schedule = [ ['Jul 25 2015', 'Sept 20 2015'], ['Sept 21 2015', 'Jul 25 2016'], ['Jul 25 2016', 'Jul 25 2030']];

计划数组中的每个元素代表一个开始日期和一个结束日期。如上所述，可以包括时间和时区，但是我在这里使用了简单的日期来保持代码的可读性。

最后，当用户加载页面时，我们需要检查它是否在指定的时间范围内。这段代码应该替换前面对initializeClock函数的调用。

// iterate over each element in the schedulefor (var i=0; i<schedule.length; i++) { var startDate = schedule[i][0]; var endDate = schedule[i][1]; // put dates in milliseconds for easy comparisons var startMs = Date.parse(startDate); var endMs = Date.parse(endDate); var currentMs = Date.parse(new Date()); // if current date is between start and end dates, display clock if (endMs > currentMs && currentMs >= startMs ) { initializeClock('clockdiv', endDate); }}schedule.forEach(([startDate, endDate]) => { // put dates in milliseconds for easy comparisons const startMs = Date.parse(startDate); const endMs = Date.parse(endDate); const currentMs = Date.parse(new Date()); // if current date is between start and end dates, display clock if (endMs > currentMs && currentMs >= startMs ) { initializeClock('clockdiv', endDate); }});

现在，您可以提前安排时钟，而无需手动更新。您可以根据需要缩短代码。为了便于阅读，我把自己写得很长。

将计时器设置为用户到达后10分钟。

在用户到达或开始一个特定的任务后，有必要在给定的时间内设置倒计时。我们在这里将计时器设置为10分钟，但是您可以使用任何时间。

我们需要做的就是用这个变量替换deadline:

const timeInMinutes = 10;const currentTime = Date.parse(new Date());const deadline = new Date(currentTime + timeInMinutes*60*1000);

这段代码将占用当前时间并增加十分钟。这些值将被转换为毫秒，因此它们可以被加在一起，成为一个新的截止日期。

现在，我们有了一个可以从用户到达的时间开始倒计时10分钟的时钟。随意发挥，尝试不同长度的时间。

保持跨页面的时钟进度。

有时，有必要保持时钟状态超过当前页面。如果我们想在整个网站上设置一个10分钟的计时器，我们不想在用户转到其他页面时重置它。

一种解决方案是将时钟的结束时间保存在cookie中。这样，导航到新页面不会将结束时间重置为当前的十分钟。

这是逻辑:

如果Cookie中记录了截止日期，请使用该截止日期。如果不存在该cookie，则设置一个新的截止日期并将其存储在cookie中。

为此，请将变量替换为以下deadline:

let deadline;// if there's a cookie with the name myClock, use that value as the deadlineif(document.cookie && document.cookie.match('myClock')){ // get deadline value from cookie deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];} else { // otherwise, set a deadline 10 minutes from now and // save it in a cookie with that name // create deadline 10 minutes from now const timeInMinutes = 10; const currentTime = Date.parse(new Date()); deadline = new Date(currentTime + timeInMinutes*60*1000); // store deadline in cookie for future reference document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com';}

这段代码使用了cookie和正则表达式，它们本身是独立的主题。因此，我在此不再赘述。需要注意的一点是，您需要将yourdomain.com更改为实际的域。

关于客户端事件的重要警告

JavaScript日期和时间是从用户的计算机上获得的。这意味着用户可以通过改变计算机上的时间来影响JavaScript时钟。大多数情况下，这并不重要。但是，在一些超级敏感的情况下，需要从服务器获取时间。可以使用一些PHP或Ajax来完成，这两者都超出了本教程的范围。

从服务器获得时间后，我们可以使用本教程中相同的技术来使用它。

总计

在阅读了本文中的示例后，您现在知道如何用几行原始JavaScript代码创建自己的倒计时器了！我们已经研究了如何制作一个基本的倒计时钟，并有效地显示它。我们还介绍了添加一些有用的附加功能，包括调度、绝对时间和相对时间，以及使用Cookie来保持页面和站点访问之间的状态。

完全码

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Countdown Clock</title><style type="text/css"> body{ text-align: center; background: #00ECB9; font-family: sans-serif; font-weight: 100;}h1{ color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px;}#clockdiv{ font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px;}#clockdiv > div{ padding: 10px; border-radius: 3px; background: #00BF96; display: inline-block;}#clockdiv div > span{ padding: 15px; border-radius: 3px; background: #00816A; display: inline-block;}.smalltext{ padding-top: 5px; font-size: 16px;} </style></head><body> <h1>Countdown Clock</h1><div id="clockdiv"> <div> <span class="days"></span> <div class="smalltext">Days</div> </div> <div> <span class="hours"></span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes"></span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds"></span> <div class="smalltext">Seconds</div> </div></div><script type="text/javascript"> 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 };}function initializeClock(id, endtime) { const clock = document.getElementById(id); const daysSpan = clock.querySelector('.days'); const hoursSpan = clock.querySelector('.hours'); const minutesSpan = clock.querySelector('.minutes'); const secondsSpan = clock.querySelector('.seconds'); function updateClock() { const t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); if (t.total <= 0) { clearInterval(timeinterval); } } updateClock(); const timeinterval = setInterval(updateClock, 1000);}const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);initializeClock('clockdiv', deadline);</script></body></html>

js获取当前时间(nodejs获取当前时间)

序

基本时钟:特定日期或时间的倒计时。

设置有效的结束日期。

计算剩余时间

将时间转换成可用的格式。

将时钟数据输出为可重复使用的对象

显示时钟，当它到达零时停止

准备显示时钟

消除初始延迟

避免连续重建时钟。

添加前导零

进一步地

自动时钟装置

将计时器设置为用户到达后10分钟。

保持跨页面的时钟进度。

关于客户端事件的重要警告

总计

完全码

推荐的JavaScript经典范例学习资料文章

发表回复

js获取当前时间(nodejs获取当前时间)

序

基本时钟:特定日期或时间的倒计时。

设置有效的结束日期。

计算剩余时间

将时间转换成可用的格式。

将时钟数据输出为可重复使用的对象

显示时钟，当它到达零时停止

准备显示时钟

消除初始延迟

避免连续重建时钟。

添加前导零

进一步地

自动时钟装置

将计时器设置为用户到达后10分钟。

保持跨页面的时钟进度。

关于客户端事件的重要警告

总计

完全码

推荐的JavaScript经典范例学习资料文章

相关推荐

发表回复