上网十八手 做出个倒数计时器
有时候，您需要构建一个 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，以将剩余时间保存到截止日期。该Date.parse()函数将时间字符串转换为以毫秒为单位的值。这使我们可以将彼此相减两次并获得两者之间的时间量。
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 中输出时钟数据：
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);
}
这个函数有两个参数。这些是包含我们的时钟的元素的 id，以及倒计时的结束时间。在函数内部，我们将声明一个clock变量并使用它来存储对时钟容器 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 + '
' +
'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);
避免不断重建时钟
我们需要让时钟脚本更高效。我们只想更新时钟中的数字，而不是每秒重建整个时钟。实现此目的的一种方法是将每个数字放在span标签内，并且只更新这些跨度的内容。
这是HTML：
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 秒，而是显示 07 秒。一种简单的方法是在数字的开头添加一个字符串“0”，然后切掉最后两位数字。
例如，要将前导零添加到“秒”值，您可以更改：
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 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 保留页面和站点访问之间的状态。
如果本文对你有帮助，别忘记给我个3连 ，点赞，转发，评论，，咱们下期见。
收藏 等于白嫖，点赞才是真情。
亲爱的小伙伴们，有需要JAVA面试文档资料请点赞＋转发，关注我后，私信我333就可以领取免费资料哦
