倒计时和限时抢效果

由于最近一直在忙企鹅某官网的改版，所以一直没来得及更新公众号，谅解哈。

接下来我们继续前篇js效果内容，根据前面的时间显示效果，我们来扩展两个小例子。

第一个是倒计时的天数效果。就是说假如现在是9月4号，我们设置结束时间为10月4号，那么显示的结果应该要为30。

这个效果中，有两个比较重要的方法，一个时getTime()，一个是内置方法ceil()。

getTime()是返回毫秒数，而Math.ceil()是向上取整的计算，它返回的是大于或等于函数参数、并且与之最接近的整数。如Math.ceil(12.2)，返回13。

首先是HTML结构，我们用一个id为timeshow的元素来显示天数：

接下来是js，首先写出当前时间和我们要结束的时间：

然后获取这两个时间的毫秒数之差，接着除以一天的毫秒数（24小时*60分*60秒*1000毫秒），就得出了天数了；之后将其显示在HTML元素上：

显示结果：

这样就完成了一个小的倒计时效果了，贴出所有代码：

--------------------------------------栗子分割线----------------------------------

以上是一个相对简单的倒计时效果，接下来我们要实现一个限时抢的效果，效果如图：

思路类似倒计时效果；先知道要结束的时间，再获取当前时间，得出时间差，时间差则通过数学换算成天、小时、分、秒即可。

老规矩，先写HTML，用了一个ID为leftTime的元素来显示效果：

接着在html都载入时执行js，我们把动画都封装在一个showTime()函数中：

接着进入正题啦；先获取当前时间和结束时间（此时我的电脑时间是9月5号），然后把两个毫秒时间相减再除以1000，得出秒数的时间差lefttime。

接着就是对时间差做各种换算了，换算出天数、小时、分、秒。

这里解释一下

d：把总共的秒数除以一天的秒数，就得出所有天数了；

h：把总共的秒数除以一小时的秒数(60分*60秒)，就得出所有小时数，然后把一天24小时为整数的这部分去掉，剩下的余数则为小时数了；

m：把总共的秒数除以一分钟的秒数(60秒)，得出所有分钟数，然后去掉60分钟为整数的这部分，剩下的余数则为分钟数了；

s：把总共的秒数去掉60秒这部分，剩下的余数就为当前的秒数了。

然后我们把结果显示在标签上，并且当总秒数为0时，我们让标签显示“团购结束”的字样。

最后我们在showTime函数里面调用showTime函数，实现回调，这样就能实时更新时间的显示了。

显示的结果：

好了，整个案例结束了，恭喜你的js能力又提高了一丢丢。最后给出整个代码：

好了，这次就到这来了。现在公众号里的成员越来越多了，以后我也会定时给出一些常用的实例，共同提高js的编写能力。