JavaScript如何构建一个倒数计时器

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

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

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

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

getTimeRemaining(deadline).minutes

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

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

function updateClock(){   const t = getTimeRemaining(endtime);   clock.innerHTML = 'days: ' + t.days + '
' +                     'hours: '+ t.hours + '
' +                     'minutes: ' + t.minutes + '
' +                     'seconds: ' + t.seconds;   if (t.total <= 0) {     clearInterval(timeinterval);   } }  updateClock(); // 首先运行一函数能以避免延迟 var timeinterval = setInterval(updateClock,1000);

     Days: 
     Hours: 
     Minutes: 
     Seconds:  

现在让我们参考这些元素。在定义 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.3 添加前导0

现在时钟不再每秒都在重建，我们还有另一件事要做：添加前导零。例如，不是让时钟显示7秒，而是显示07秒。一种简单的方法是在一个数的开头加上一串“0”，然后切掉最后两个数字。

例如，要在“seconds”值上添加前导零，你可以更改以下设置：

secondsSpan.innerHTML = t.seconds;

为

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

如果你愿意，你也可以在分钟和小时的前面加零。如果你已经走到这一步，恭喜你!你的时钟现在已经可以显示了。

8.更进一步

以下示例演示了如何为某些用例扩展时钟。它们都是基于上面的基本例子。

8.1 自动调节时钟

假设我们想让时钟在特定的日子出现，而不是在其他的日子。例如，我们可能有一系列事件即将发生，而不希望每次都手动更新时钟。以下是如何提前安排事情的方法。

通过在CSS中将其 display 属性设置为 none 来隐藏时钟，然后将以下内容添加到 initializeClock 函数中(以 var clock  开头的行之后)。这将导致只有在调用 initializeClock 函数后才会显示时钟：

clock.style.display = 'block';

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

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

Schedule数组中的每个元素代表一个开始日期和一个结束日期。如上所述，它可以包含时间和时区，但我在这里使用了普通的日期，以保持代码的可读性。

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

// 遍历schedule中的每个元素 schedule.forEach(([startDate, endDate]) => {   // 以毫秒为单位放置日期以便于比较   const startMs = Date.parse(startDate);   const endMs = Date.parse(endDate);   const currentMs = Date.parse(new Date());    // 如果当前日期在开始日期和结束日期之间，则显示时钟   if (endMs > currentMs && currentMs >= startMs ) {     initializeClock('clockdiv', endDate);   } });

现在，你可以提前安排你的时钟，而不必手动更新它。如果你愿意，你可以缩短代码。为了便于阅读，我把我的代码写得很啰嗦。

8.2 从用户到达起将计时器设置为10分钟

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

我们需要做的就是用以下命令替换 deadline 变量：

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

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

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

8.3 跨页面保持时钟进度

有时，除了当前页面外，还需要保留时钟状态。如果我们想在整个网站上设置10分钟的计时器，则我们不希望在用户转到其他页面时重置该计时器。

一个解决方案是将时钟的结束时间保存在一个cookie中。这样一来，导航到一个新的页面就不会把结束时间重置到十分钟以后。

这是逻辑：

如果Cookie中记录了截止日期，使用该截止日期。

如果不存在Cookie，请设置一个新的截止日期并将其存储在Cookie中。

要实现这一点，请使用以下命令替换 deadline 变量：

let deadline;  // 如果有一个名为myClock的cookie，则使用该值作为截止日期 if(document.cookie && document.cookie.match('myClock')){   // 从Cookie获取截止日期值   deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2]; } else {   // 否则，请设置从现在开始10分钟的截止日期，   // 将其保存在具有该名称的cookie中    // 创建从现在开始10分钟的截止日期   const timeInMinutes = 10;   const currentTime = Date.parse(new Date());   deadline = new Date(currentTime + timeInMinutes*60*1000);    // 将截止日期存储在cookie中以供将来引用   document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com'; }

需要注意的是，你需要将 .yourdomain.com 改为你的实际域名。

读到这里，这篇“JavaScript如何构建一个倒数计时器”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。