有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备。不管你是否有一次约会,销售、促销、或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的插件。虽然有许多很棒的时钟插件,但如果使用原生 JavaScript 实现,那你将得到以下好处:

  • 代码将是轻量级的,因为它没有依赖关系。
  • 你的网站会表现得更好,因为你不需要加载外部脚本和样式表。
  • 你将会有更高的可控性,因为你将按照想要的时钟行为的方式来创建它(而不是找一个趋向你想法的插件)。

所以事不宜迟,以下是如何使用仅仅18行JavaScript代码来做一个自己的倒计时时钟。

基础时钟:倒计时到特定的日期或时间

以下是创建一个基础时钟的快速概要步骤:

  • 设置一个有效的结束日期。
  • 计算剩余时间。
  • 将时间转换成可用的格式。
  • 输出时钟数据作为一个可重用的对象。
  • 在页面上显示时钟,并在它到达0时停止。

设置一个有效的结束日期

首先,你需要设置一个有效的结束日期。它是JavaScript Date.parse()方法能够解析的任何格式的一个字符串。例如:

ISO 8601格式:

var deadline = ‘2015-12-31’;

短格式:

var deadline = ’31/12/2015′;

或者,长格式:

var deadline = ‘December 31 2015’;

这些格式都可以指定一个确切的时间(小时,分钟和秒),以及时区(或者如果是ISO日期,则是UTC的偏移量)。例如:

var deadline = ‘December 31 2015 23:59:59 GMT+02:00’;

你可以在 此文阅读更多关于JavaScript的日期格式化。

计算剩余时间

下一步是计算剩余时间。做到这一点,我们需要编写一个函数,它接收一个代表给定结束时间的字符串(如上所述),并计算这个时间和当前时间的差值。代码如下:

function getTimeRemaining(endtime){

var t = Date.parse(endtime) – Date.parse(new Date());

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

var minutes = Math.floor( (t/1000/60) % 60 );

var hours = Math.floor( (t/(1000*60*60)) % 24 );

var days = Math.floor( t/(1000*60*60*24) );

return {

‘total’: t,

‘days’: days,

‘hours’: hours,

‘minutes’: minutes,

‘seconds’: seconds

};

}

首先,我们创建一个变量t,保存剩下的时间期限。Date.parse()函数是原生JavaScript,它将一个时间字符串转换成以毫秒为单位的值。这让我们可以将两个时间相减,并获得间隔时间。

var t = Date.parse(endtime) – Date.parse(new Date());

转换时间为可用的格式

现在我们想把毫秒转换成天、小时、分钟、秒。让我们以秒为例:

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

让我们解释这是怎么回事。

  1. 毫秒除以1000转换为秒:(t / 1000)
  2. 总秒除以60,获取余数——你不想要所有的秒,只是(t / 1000)%60之后的分钟剩余的秒数
  3. 将它取整,因为你想要完整的秒,而不是分数秒:Math.floor((t / 1000)% 60)

重复这个逻辑将秒转换为分钟、小时、天。

输出时钟数据作为一个可重用的对象

准备好天、小时、分钟和秒,我们现在准备将数据作为一个可重用的对象返回:

return {

‘total’: t,

‘days’: days,

‘hours’: hours,

‘minutes’: minutes,

‘seconds’: seconds

};

该对象允许你调用函数,得到任何已计算的值。这里有一个如何得到剩余分钟的例子:

getTimeRemaining(deadline).minutes

很方便,对吗?

在页面上显示时钟,并在它到达0时停止。

现在,我们有一个函数,它可以提取天、小时、分钟和秒,我们可以构建时钟了。首先,我们将创建以下HTML元素来存放我们的时钟:

<div id=”clockdiv”></div>

然后我们将编写一个函数,输出时钟数据到新div:

function initializeClock(id, endtime){

var clock = document.getElementById(id);

var timeinterval = setInterval(function(){

var t = getTimeRemaining(endtime);

clock.innerHTML = ‘days: ‘ + t.days + ‘&lt;br&gt;’ +

‘hours: ‘+ t.hours + ‘&lt;br&gt;’ +

‘minutes: ‘ + t.minutes + ‘&lt;br&gt;’ +

‘seconds: ‘ + t.seconds;

if(t.total&lt;=0){

clearInterval(timeinterval);

}

},1000);

}

这个函数接收两个参数:显示时钟的元素的id和倒计时的结束时间。在函数内部,我们将声明一个名为clock的变量用来保存时钟容器div的引用,这样我们不需要不断查询DOM。

接下来,我们将使用setInterval每秒钟执行一次匿名函数,它将执行以下操作:

  • 计算剩余时间。
  • 将剩余时间输出到div。
  • 如果剩余时间到达0,停止时钟。

到这里,唯一剩下的步骤运行时钟如下:

initializeClock(‘clockdiv’, deadline);

恭喜你!你现在有一个基本的时钟,它只有短短18行JavaScript代码。

优化时钟显示

给时钟加样式之前,我们需要完善一点的东西。

  • 移除初始加载的延迟,这样时钟会立即出现。
  • 为了让时钟脚本更有效率,不要不断重建整个时钟。
  • 根据需要添加前缀0。

移除初始加载的延迟

在时钟中,我们用setInterval每秒钟更新显示。大部分时间都很好,除了一开始的时候会有一秒钟的延迟。为了消除这个延迟,我们将不得不在间隔开始前就更新时钟。

要做到这一点,将传递给setInterval(它每秒钟更新时钟)的匿名函数迁移到一个独立的函数,命名为updateClock。在setInterval外调用updateClock一次,然后在setInterval里面再次调用,这种方式,时钟显示的时候就没有延迟。

在你的JavaScript中,替换:

var timeinterval = setInterval(function(){ … },1000);

function updateClock(){

var t = getTimeRemaining(endtime);

clock.innerHTML = ‘days: ‘ + t.days + ‘&lt;br&gt;’ +

‘hours: ‘+ t.hours + ‘&lt;br&gt;’ +

‘minutes: ‘ + t.minutes + ‘&lt;br&gt;’ +

‘seconds: ‘ + t.seconds;

if(t.total&gt;=0){

clearInterval(timeinterval);

}

}

updateClock(); // run function once at first to avoid delay

var 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变量定义的下面添加以下代码

var daysSpan = clock.querySelector(‘.days’);

var hoursSpan = clock.querySelector(‘.hours’);

var minutesSpan = clock.querySelector(‘.minutes’);

var secondsSpan = clock.querySelector(‘.seconds’);

接下来,我们只需要改变updateClock函数来更新数据而不是重建整个时钟。新代码是这样的:

function updateClock(){

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

如果你愿意,你可以为minutes和hours添加前导零。如果你已经走了这么远,那么恭喜你!你的时钟可以显示了。

注意:您可能需要点击CodePen中的“Rerun”来启动倒计时。

更进一步

下面的例子演示了如何为某些场景设计时钟。他们都是基于上面的基础例子。

自动安排时钟

假设我们希望时钟出现在特定的某些天。例如,我们可能会有一系列的事件出现,同时不想每次都手动更新时钟。下面介绍如何提前进行规划安排。

在CSS中通过设置display属性为none来隐藏时钟。然后添加以下代码到initializeClock函数(在var clock语句的后面)。这将导致时钟只在initializeClock函数被调用显示:

clock.style.display = ‘block’;

接下来,我们可以指定时钟应该出现的时间段。这将替换deadline变量:

var 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&amp;lt;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 &amp;gt; currentMs &amp;amp;&amp;amp; currentMs &amp;gt;= startMs ){

initializeClock(‘clockdiv’, endDate);

}

}

现在你可以提前安排你的时钟,而不必手动更新它。你可以简化代码。我为了可读性写的有点详细。

当用户到达倒计时

有时有必要为一个用户到达或开始一个特别任务的给定时间设置一个倒计时。这里我们将使用十分钟,但是您可以使用任何你想要的时间。

所有我们需要做的是将deadline变量替换为:

var timeInMinutes = 10;

var currentTime = Date.parse(new Date());

var deadline = new Date(currentTime + timeInMinutes*60*1000);

这段代码将当前时间增加了十分钟。再转换为毫秒,所以他们可以相加在一起,并转换成一个新的截止日期。

现在我们有一个时钟,在十分钟用户到达时倒计时。请随便玩,尝试不同的时间长度。

跨页面保持时钟

有时有必要不仅仅为当前页面保持时钟的状态。例如,如果我们希望整个网站有一个十分钟的倒计时,我们不希望每次用户进入不同的页面或每次用户刷新页面时重置时钟。

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

逻辑是这样的:

  1. 如果deadline记录在一个cookie中,使用deadline。
  2. 如果cookie不存在,创建一个新的deadline并将它存储在一个cookie中。

为了实现这一点,如下替换deadline变量:

// if there’s a cookie with the name myClock, use that value as the deadline

if(document.cookie &amp;amp;&amp;amp; document.cookie.match(‘myClock’)){

// get deadline value from cookie

var deadline = document.cookie.match(/(^|

18 行 JS 代码编一个倒时器的更多相关文章

  1. JS 代码编一个倒时器

    有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...

  2. 不到30行JS代码实现的Excel表格

    不到30行JS代码实现的Excel表格,jQuery并非不可替代 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: 由不足30行的原生JavaScript代码实现 ...

  3. 20行JS代码实现贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 40多行python代码开发一个区块链。

    40多行python代码开发一个区块链?可信吗?我们将通过Python 2动手开发实现一个迷你区块链来帮你真正理解区块链技术的核心原理.python开发区块链的源代码保存在Github. 尽管有人认为 ...

  5. 30行JavaScript代码实现一个比特币量化策略

    精简极致的均线策略 30行打造一个正向收益系统 原帖地址:https://www.fmz.com/bbs-topic-new/262 没错!你听的没错是30行代码!仅仅30行小编我习惯先通篇来看看 代 ...

  6. 只用120行Java代码写一个自己的区块链

    区块链是目前最热门的话题,广大读者都听说过比特币,或许还有智能合约,相信大家都非常想了解这一切是如何工作的.这篇文章就是帮助你使用 Java 语言来实现一个简单的区块链,用不到 120 行代码来揭示区 ...

  7. 50行ruby代码开发一个区块链

    区块链是什么?作为一个Ruby开发者,理解区块链的最好办法,就是亲自动手实现一个.只需要50行Ruby代码你就能彻底理解区块链的核心原理! 区块链 = 区块组成的链表? blockchain.ruby ...

  8. 只用200行Go代码写一个自己的区块链!

    Coral Health · 大约23小时之前 · 220 次点击 · 预计阅读时间 7 分钟 · 不到1分钟之前 开始浏览 区块链是目前最热门的话题,广大读者都听说过比特币,或许还有智能合约,相信大 ...

  9. 20行js代码制作网页刮刮乐

    分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) &l ...

随机推荐

  1. vs code插件记录

    最近一段时间一直在迷恋vs code,使用了一段时间,发现它即精简又快速,安装插件又快又稳定而且插件说明也很详细,是一款继sublime后少得的良心前端编辑器,配合上一些插件可以补全一些不足以更趋向于 ...

  2. Android开发学习之路-该怎么学Android(Service和Activity通信为例)

    在大部分地方,比如书本或者学校和培训机构,教学Android的方式都基本类似,就是告诉先上原理方法,然后对着代码讲一下. 但是,这往往不是一个很好的方法,为什么? ① 学生要掌握这个方法的用途,只能通 ...

  3. MongoDB 搭建副本集

    副本集(Replica Set)是一组MongoDB实例组成的集群,由一个主(Primary)服务器和多个备份(Secondary)服务器构成.通过Replication,将数据的更新由Primary ...

  4. easyui中方向键、tab键、回车键

    1.html中 function changeTab(event, i) { var keyCode = event.keyCode; var inputs = jQuery("#table ...

  5. .NET足球赛事资料数据库平台SmartLottery开源发布——全球足球联赛应有尽有

            本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源C#彩票数据资料库系列文章总目录:[目录]C#搭建足球赛事资料库与预测平台与彩票数据分析目录 前2个月,我的系列文 ...

  6. PinnedHeaderListView实现删除

    项目中用到四个List集合展示一个页面,并且每个页面都会有一个标题栏.找了半天资料决定用PinnedHeaderListView开源项目.最后需求又来了,需要一个删除的功能,又去网上找资料,发现没有实 ...

  7. Ubuntu杂记——Ubuntu下以USB方式连接Android手机调试

    在Ubuntu下进行Android开发,发现自己的手机就算打开USB连接.USB调试还是连不上,一直都是显示??????.百度了很多,发现都是要改“ /etc/udev/rules.d/50-andr ...

  8. Solr学习总结(三)Solr web 管理后台

    前面讲到了Solr的安装,按道理,这次应该讲讲.net与数据库的内容,C#如何操作Solr索引等.不过我还是想先讲一些基础的内容,比如solr查询参数如何使用,各个参数都代表什么意思? 还有solr ...

  9. Nodejs之MEAN栈开发(四)---- form验证及图片上传

    这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...

  10. JS实现带复选框的下拉菜单

    这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...