短信预约-IT技能 免费直播动态提醒

2024-12-11 21:40

关注

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

initializeClock('clockdiv', deadline); 

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(); // run function once at first to avoid delay 
var timeinterval = setInterval(updateClock,1000); 

"clockdiv"> 
    Days: "days">
 
    Hours: "hours">
 
    Minutes: "minutes">
 
    Seconds: "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秒，而是显示07秒。一种简单的方法是在数字的开头添加字符串“ 0”，然后切掉最后两位数字。

例如，要在“ seconds”值上添加前导零，您可以对此进行更改：

secondsSpan.innerHTML = t.seconds; 

对此：

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

如果需要，您也可以在分钟和小时中添加前导零。如果您走了这么远，恭喜!您的时钟现在可以显示了。

注意：您可能需要在CodePen中单击“重新运行”才能开始倒计时。

更进一步

下面的示例演示如何针对某些用例扩展时钟。它们都是基于上面看到的基本示例。

自动安排时钟

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

通过在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函数的调用。

// iterate over each element in the schedule 
for (var i=0; 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分钟的计时器，则我们不希望在用户转到其他页面时将其重置。

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

这是逻辑：

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

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

要实现这一点，请用deadline以下内容替换变量：

let deadline; 
 
// if there's a cookie with the name myClock, use that value as the deadline 
if(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保留页面和站点访问之间的状态。

完整代码

 
"zh"> 
 
"UTF-8" /> 
name="viewport" content="width=device-width, initial-scale=1.0" /> 
"X-UA-Compatible" content="ie=edge" /> 
 
"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; 
} 
   
 
 
     
"clockdiv"> 
  
 
    "days"> 
    "smalltext">Days