β

自由组合的倒计时库:jQuery.countdown.js

郑州网建 51 阅读

我们都知道,在一些促销商品上、拍卖、优惠券等,都会有时效性,为了促销吸引眼球,会加一个倒计时来时刻提醒顾客:想买要抓紧了,时间不等人。那么作为前端开发的我们,要怎么来实现这个倒计时呢?

首先,这个倒计时功能,一定要友好,具体表现在,可以适用任何布局,不依赖HTML/CSS的限制,有针对性的,适应优惠券、拍卖类型的网站。接下来,才是日期时间的倒序来跑秒。

源于,jQuery的大量使用,这里,推荐一款它的插件:jQuery.countdown.js。

一个友好的倒计时库:jQuery.countdown.js

倒计时插件:jQuery.countdown.js

题外话:这个图里的“最后”,是字面意思,其实是终极、人性化、友好的意思。

那么什么是jQuery.countdown.js呢?

它是一个简单的和HTML无关的日期倒计时插件,依赖jQuery1.7+。

浏览器支持情况:IE7+、Chrome>=12、Safari>=5、FireFox>=5.0,也就是说,基本都支持的。

它的开发初衷,就是为了适应任何的优惠券、拍卖、商品促销活动。因此,它的使用和呈现灵活度很高。

那么怎么使用它呢?

首先,你需要到github上搜索:jQuery.countdown.js,然后引入页面中。如下图说明:

一个友好的倒计时库:jQuery.countdown.js

jQuery.countdown.js的使用步骤和效果

从上图的代码中,我们可以看到,它和HTML无关的意思了,你可以任意组合显示的方式,它会填充你的%w、%d、%H、%M、%S。

它还有很多配置选项,很多用法,比如:倒计时秒结束后正常时间钟等。

我们用插件还能得到什么?

如果你只是为了实现某个功能,那么插件就可以达到的,我们还能获取什么呢? 这里,我想说的是,如果时间足够的话,不妨看一下插件或者js库的源码,学习或者增强一下自己的知识点。

比如本插件中,有这么一句:

var argumentsArray = Array.prototype.slice.call(arguments, 0);

我们知道,arguments是函数的参数对象。它是数组吗?

不是的,它是一个类数组。

类数组:具有key名为:length,值为数字,其它key,也是数字,类似这样:'0'、'1'...

你可以像数组那样(arguments[0])使用。但是,你应该转换为真正的数组(这要是前端面试的常见题)。

还比如本插件中,有这样的语句:

var DIRECTIVE_KEY_MAP = {Y:"years", m:"months",...}

这种key简称图的方式,是不是更方便简洁。

这里只是,抛砖引玉,你可以发现更好玩的。有空赶紧试试吧。

【本文由“码农不是农”发布,2017年06月07日】

作者:郑州网建
Good Good Study ,Day Day Up!
原文地址:自由组合的倒计时库:jQuery.countdown.js, 感谢原作者分享。

发表评论