·您当前的位置:主页 > 技术教程 > jQuery教程 >

[jQuery]基于jQuery的插件开发倒计时countdown

时间:2014-12-01 17:07酷播
本次开发的插件是countdown(倒计时),这个是个小插件,可 能都是大家看不起眼的插件。呵呵,也许吧。功能的确简单。但是可扩展性可是很强的啊

 故事背景:按照惯例,先写下故事背景,其实也是再次汇报下最近开发情况的。做电商的都知道,这是个活动季啊,双十一、双十二、元旦。。。。各种啊。。其实说这么多就是想表达最近比较忙。呵呵^_^,正好今天抽点空来我最爱的网站写点自己喜欢的和大家分享下。

  还是之前按之前所说,插件源于开发需求。正好最近项目中需要用到计时器和预加载 图片功能,本人心血来潮,决定整个插件封装一下,即满足了项目的需要,也满足自己的爱好啊,算是一举两得吧^^。其实写插件的时候要考虑到很多,因为公共 的东西,如果出错,那后果会影响很大。毕竟不是一个地方用。所以,开发插件的时候一定要考虑全面。经过N次自测和他测,然后再使用。也就是我之前所说的, 好的插件源于测试。经不起测试的插件,那就是个大坑啊。相信不少程序猿同仁被坑过啊。说多了都是泪啊。。。。所以现在的我是能不用第三方的坚决不用,就算 麻烦也要自己去写。。。

  额。。好像又扯多了,这里就是程序猿网上的家啊,到了家里就是能说,一不小心就说多了。。。好了,开始本次插件系列开发的正题吧。

  故事经过:本次开发的插件是countdown(倒计时),这个是个小插件,可 能都是大家看不起眼的插件。呵呵,也许吧。功能的确简单。但是可扩展性可是很强的啊,例如,如果一个页面上有多个这样的倒计时,(例如淘宝页面的商品倒计 时)难不成要写多次?当然不是这样。大部分的倒计时都是用window.setInterval实现的。使用window.setInterval就会涉 及到关闭计时器的动作。这个动作也是很多人常常会漏掉的,希望大家养成良好习惯,及时关闭计时器。否则会给页面带来很大开销。更何况如果一个页面有很多个 这样的计时器,例如淘宝的限时促销活动。一个页面可能有几十个倒计时器,如果在结束时候不关闭,那么这样的影响就很大了。所以,猿们,我们得养成好习惯 啊。得像狮学习啊。^_^

  其实当一个页面有未知个数的倒计时的时候,那么我们就要专门去控制关闭了,而不是那么简单的clearInterval("...");了。所以,一个看似简单的倒计时,只要你肯挖掘里面的需求,其实也不是那么简单。当然喽,也不是很复杂了。

  先说下本倒计时的功能吧。1、支持同一个页面多个倒计时;2、倒计时结束后,能自动释放计时器;

  看过我之前写的插件开发系列的都知道我写插件的规范,或者说是习惯吧。老样子,开发插件分三步走:

  第一步:定义插件和参数  var countdown= function () {this.defaultParams = {};};

  第二步:定义插件属性、方法    countdown.prototype = {constructor: countdown,init:function (params){}};

  第三步:对外分装  $.countdown= new countdown();

  这里在啰嗦两句,为啥老是这样写呢,首先,做任何事情都要按“步骤”来,这里不 是说要按部就班啥的,是一种自己看好的习惯,也算是我个人理解的一个规范吧。第二,这样写思路很清晰,目的也很明确,剩下的只需要你去填充就行了。当然 了,每个插件的内部实现都是不一样的,难易不一,这个只能算个框架,或是说思路吧。

  这篇博文写了很久,主要是忙了一段时间忘记了,今天又拿出来,补上吧。算是给自己一点安慰吧,一般我不喜欢拖着一件事情的,尤其是自己喜欢的事情。^_^

  好了,该是贴代码的时刻了,哈哈

  1. /* 
  2.  *  instructions :countdown   
  3.  *  date : 2014-10-26 
  4.  *  author : 张文书 
  5.  *  Last Modified 2014-10-17 
  6.  *  By 张文书 
  7.  */ 
  8.  
  9.  
  10. $(function () { 
  11.  
  12.     ///说明: 
  13.     ///     倒计时 
  14.     var countdown = function () { 
  15.         this.defaults = { 
  16.             endDateTime: "",//结束时间  格式"yyyy-MM-dd HH:mm:ss" 
  17.             currentDateTime: "",//服务器当前时间 格式"yyyy-MM-dd HH:mm:ss" 
  18.  
  19.             remainDaysId: "",//剩余天 ID 
  20.             remainHoursId: "",//剩余小时 ID 
  21.             remainMinutesId: "",//剩余分钟 ID 
  22.             remainSecondsId: "", //剩余秒钟 ID 
  23.             countDownName: "",  //倒计时器名称 
  24.             difference: 0    //时间间隔(无需赋值,只做接收) 
  25.         }; 
  26.         this.options = {}; 
  27.  
  28.     }; 
  29.  
  30.     countdown.prototype = { 
  31.  
  32.         constructor: countdown, 
  33.  
  34.         init: function (params) { 
  35.             this.options = $.coverObject(this.defaults, params); 
  36.             this._initCountdown(); 
  37.  
  38.         }, 
  39.  
  40.         _initCountdown: function () { 
  41.  
  42.             thisthis.options.difference = this.getDifference(); 
  43.             var options = this.options; 
  44.             this.options.countDownName = window.setInterval(function () { 
  45.                 countdown.prototype.getCountdownTime(options); 
  46.             }, 1000); 
  47.  
  48.         }, 
  49.  
  50.         //说明: 
  51.         //      返回结束时间和当前服务器时间的差值 
  52.         getDifference: function () { 
  53.  
  54.             var endDateTime = this.convertStrToDate(this.options.endDateTime);//设置结束时间 
  55.             var endTime = endDateTime.getTime();//定义参数可返回距 1970 年 1 月 1 日之间的毫秒数   
  56.  
  57.             var nowTime = this.convertStrToDate(this.options.currentDateTime);//当前时间 
  58.  
  59.             var difference = endTime - nowTime.getTime();//差值 
  60.             return difference; 
  61.         }, 
  62.  
  63.         //说明: 
  64.         //      获得并显示倒计时时间 
  65.         getCountdownTime: function (options) { 
  66.  
  67.             optionsoptions.difference = options.difference - 1000; 
  68.  
  69.             var nMS = options.difference; 
  70.             var nD = Math.floor(nMS / (1000 * 60 * 60 * 24));//获得天数 
  71.             var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;//获得小时 
  72.             var nM = Math.floor(nMS / (1000 * 60)) % 60;//获得分钟 
  73.             var nS = Math.floor(nMS / 1000) % 60;//获得秒钟 
  74.             if (nMS < 0) { 
  75.                 clearInterval(options.countDownName);//停止 
  76.             } else { 
  77.                 $("#" + options.remainDaysId).text(nD < 10 ? "0" + nD : nD);//显示天数   
  78.                 $("#" + options.remainHoursId).text(nH < 10 ? "0" + nH : nH);//显示小时   
  79.                 $("#" + options.remainMinutesId).text(nM < 10 ? "0" + nM : nM);//显示分钟   
  80.                 $("#" + options.remainSecondsId).text(nS < 10 ? "0" + nS : nS);//显示秒钟   
  81.             } 
  82.         }, 
  83.  
  84.         //说明: 
  85.         //      将字符串转成时间类型 
  86.         convertStrToDate: function (strDate) { 
  87.             var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')'); 
  88.             return date; 
  89.         } 
  90.     }; 
  91.  
  92.     $.countdown = new countdown(); 
  93.  
  94. }); 

热门文章推荐

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器