18 行 JS 代码编一个倒时器

2016-7-21 12:15 1556 0

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

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

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

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

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

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

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

设置一个有效的结束日期

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

1	var deadline = '2015-12-31';

短格式：

1	var deadline = '31/12/2015';

或者，长格式：

1	var deadline = 'December 31 2015';

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

1	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，它将一个时间字符串转换成以毫秒为单位的值。这让我们可以将两个时间相减，并获得间隔时间。

1	var t = Date.parse(endtime) - Date.parse(new Date());

转换时间为可用的格式

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

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

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

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

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

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

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

return {

'total': t,

'days': days,

'hours': hours,

'minutes': minutes,

'seconds': seconds

};

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

1	getTimeRemaining(deadline).minutes

很方便，对吗?

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

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

1	<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 + ' ' +

'hours: '+ t.hours + ' ' +

'minutes: ' + t.minutes + ' ' +

'seconds: ' + t.seconds;

if(t.total<=0){

clearInterval(timeinterval);

}

},1000);

}

这个函数接收两个参数：显示时钟的元素的id和倒计时的结束时间。在函数内部，我们将声明一个名为clock的变量用来保存时钟容器div的引用，这样我们不需要不断查询DOM。
接下来，我们将使用setInterval每秒钟执行一次匿名函数，它将执行以下操作:

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

到这里，唯一剩下的步骤运行时钟如下：

1	initializeClock('clockdiv', deadline);

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

优化时钟显示

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

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

移除初始加载的延迟

在时钟中，我们用setInterval每秒钟更新显示。大部分时间都很好，除了一开始的时候会有一秒钟的延迟。为了消除这个延迟，我们将不得不在间隔开始前就更新时钟。
要做到这一点，将传递给setInterval（它每秒钟更新时钟)的匿名函数迁移到一个独立的函数，命名为updateClock。在 setInterval外调用updateClock一次，然后在setInterval里面再次调用，这种方式，时钟显示的时候就没有延迟。

在你的JavaScript中，替换：

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

为

function updateClock(){

var 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标签内，只更新这些span的内容。
HTML:

HTML:

Days:

Hours:

Minutes:

Seconds:

</div>

现在获取这些元素的引用。在clock变量定义的下面添加以下代码

1 2 3 4	var daysSpan = clock.querySelector('.days'); var hoursSpan
声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 [邮箱地址] 删除