上网十八手 做出个倒数计时器
有时候，您需要构建一个 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 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，以及倒计时的结束时间。在函数内部，我们将声明一个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 + '<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);
避免不断重建时钟
我们需要让时钟脚本更高效。我们只想更新时钟中的数字，而不是每秒重建整个时钟。实现此目的的一种方法是将每个数字放在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 中单击“重新运行”才能开始倒计时。
更进一步
以下示例演示了如何为某些用例扩展时钟。它们都基于上面看到的基本示例。
自动安排时钟
假设我们希望时钟在某些日子出现，但在其他日子不出现。例如，我们可能会出现一系列事件，并且不想每次都手动更新时钟。这是提前安排事情的方法。
通过在 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<schedule.length; i++) {var startDate = schedule[i][0];var endDate = schedule[i][1];// put dates in milliseconds for easy comparisonsvar 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 clockif (endMs > currentMs && currentMs >= startMs ) {initializeClock('clockdiv', endDate);}
}schedule.forEach(([startDate, endDate]) => {// put dates in milliseconds for easy comparisonsconst 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 clockif (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 cookiedeadline = 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 nowconst timeInMinutes = 10;const currentTime = Date.parse(new Date());deadline = new Date(currentTime + timeInMinutes*60*1000);// store deadline in cookie for future referencedocument.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com';
}
此代码使用cookie和正则表达式，它们本身就是独立的主题。出于这个原因，我不会在这里详细介绍。需要注意的一件重要事情是，您需要更改.yourdomain.com为您的实际域。
关于客户端时间的重要警告
JavaScript 日期和时间取自用户的计算机。这意味着用户可以通过更改机器上的时间来影响 JavaScript 时钟。在大多数情况下，这无关紧要。但是在超级敏感的情况下，有必要从服务器获取时间。这可以通过一点 PHP 或 Ajax 来完成，这两者都超出了本教程的范围。
从服务器获取时间后，我们可以使用本教程中的相同技术来处理它。
加起来
完成本文中的示例后，您现在知道如何使用几行原生 JavaScript 代码创建自己的倒数计时器！我们已经了解了如何制作基本的倒计时时钟并有效地显示它。我们还介绍了添加一些有用的附加功能，包括调度、绝对时间与相对时间，以及使用 cookie 保留页面和站点访问之间的状态。
如果本文对你有帮助，别忘记给我个3连 ，点赞，转发，评论，，咱们下期见。
收藏 等于白嫖，点赞才是真情。
亲爱的小伙伴们，有需要JAVA面试文档资料请点赞＋转发，关注我后，私信我333就可以领取免费资料哦
上网十八手 做出个倒数计时器相关推荐
- ios 倒数器_PS制作苹果IOS7系统中的倒数计时器
在这个PS教程当中,我们来教大家如何用PS软件来制作一张类似于苹果IOS7系统中的倒数计时器图片,具体的方法比较简单,做出来的效果还是比较漂亮的,当然了,下图的背景是可以根据自己的喜好来改变. 一.打 ...
- OpenCV学习笔记（十六）——CamShift研究 OpenCV学习笔记（十七）——运动分析和物体跟踪Video OpenCV学习笔记（十八）——图像的各种变换（cvtColor*+）imgproc
OpenCV学习笔记(十六)--CamShift研究 CamShitf算法,即Continuously Apative Mean-Shift算法,基本思想就是对视频图像的多帧进行MeanShift运算 ...
- Linux运维 第三阶段 （十八） varnish
Linux运维 第三阶段 (十八) varnish 数据: 结构化数据,RDBMS: 非结构化数据,FS,存海量小文件,NAS.SAN.DFS可提供较好的性能: web cache: 程序具有局部性( ...
- 一个黑色全屏的计时器_佳作分享最佳倒数计时器设计分析【附原型实例】
视觉效果和动画效果已经成为产品设计中不可或缺的一部分,开发人员使用动画效果可以创建引人入胜的内容,营销人员可以使用这些效果来获得更好的产品覆盖率和良好的转化率.倒数计时器就是这样一种元素,当用户登陆页 ...
- 手机屏坏了怎么把里面存东西取出来_三年来，这十八个有关MT4的问题被问了三千遍...
众所周知,MT4软件的功能非常强大,几乎可以满足各类人群的外汇交易需求.但是,功能强大也带来了负面影响,就是繁琐,导致很多功能找不到功能入口. 如果从头到尾学一遍MT4的使众所周知,MT4软件的功能非 ...
- 中科院回应木兰语言造假：当事人已停职；中国软件业务收入百强：华为蝉联十八冠；Ionic 5.0.0-beta.5 发布|极客头条...
整理 | 伍杏玲 出品 | CSDN(ID:CSDNnews) 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客 ...
- 思维导图的三招十八式
思维导图的三招十八式 张鄂勇 编著 ISBN978-7-121-14010-5 2012年1月出版 定价:49.00元 16开 396页 宣传语:会降龙十八掌,才混得到九袋弟子. 懂 ...
- 第十六讲：完美主义身心健康 第十七讲：身心健康：运动与冥想 第十八讲：睡眠，触摸和爱情的重要性
(注:此为课程第十六课,更新于2017年6月29日) 早上好! 我们今天要把完美主义讲完,然后开始讲精神肉体(Mind and Body).这个学期对我来说挺不错的,基本上没有什么东西让我后悔做过.不 ...
- 在一起计时器_设计作品｜最佳倒数计时器设计分析「附原型实例」
视觉效果和动画效果已经成为产品设计中不可或缺的一部分,开发人员使用动画效果可以创建引人入胜的内容,营销人员可以使用这些效果来获得更好的产品覆盖率和良好的转化率.倒数计时器就是这样一种元素,当用户登陆页 ...
最新文章
- XmlReader and XmlWriter in .NET
- vscode 将本地项目上传到github、从github克隆项目以及删除github上的某个文件夹
- 首次合作带给我的感想
- 火狐和chrome_Firefox，Chrome和Edge都将支持WebAuthn的硬件两因素身份验证
- FFmpeg non-existing PPS 0 referenced问题描述
- IDEA中jsp页面写out.println会报错？
- android 转屏 多个实例,android – 处理appwidget的多个实例
- SAP License：SAP软件功能有哪些?
- mybatis 同名方法_判断同名股票是否存在的MyBatis查询函数写法
- POJ-2762 Going from u to v or from v to u?
- 本地差分隐私 随机响应_大数据时代下的隐私保护(二)
- 数据库设计的几个建议
- 读书笔记(平凡的世界)
- 只有程序员才能读懂的三国演义（一）
- C语言程序设计 题目抽签系统
- ppt 转html乱码,ppt转换成pdf乱码解决方法.pdf
- iOS锁屏显示歌曲信息
- centos 安装 pcre
- 电影TS、TC、BD版和HD版
- 自我怀疑是叛徒。害怕尝试导致我们丢了本可以打赢的仗