18 行 JS 代码编一个倒时器

564 查看

有时候在生活中，你需要一个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)

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

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

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

bbole.com/category/feedback/trans-team/">翻译组。

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