之前同学做个购物商城秒杀活动需要计时器的功能,在用jquery提供的countdown插件时,一直报错,貌似还需要依赖除jquery之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个。然而我并没有写过插件,不过刚好趁这次端午好好地锻炼一把吧,顺便在这儿存个代码,自己的思路不好,大神们请不要见笑哈...

废话不多说,直接上代码:

=======================================请叫我华丽的分割线=======================================

先展示一下插件调用方式:

1.需要先加载countdown插件对应的css文件,也就几行代码而已,可以不用引入,自己手写一样啦

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  4. <title>jquery countdown倒计时插件</title>
  5. <link rel="stylesheet" type="text/css" href="css/jquery.countdown-1.0.0.css"/>
  6. </head>

css代码内容:

  1. * {
  2. margin:;
  3. padding:;
  4. -webkit-box-sizing: border-box;
  5. -moz-box-sizing: border-box;
  6. -ms-box-sizing: border-box;
  7. -o-box-sizing: border-box;
  8. box-sizing: border-box;
  9. -webkit-font-smoothing: antialiased;
  10. -moz-osx-font-smoothing: grayscale;
  11. }
  12.  
  13. html,
  14. body {
  15. font: 24px/1.5 'Microsoft YaHei', arial, tahoma, '\5b8b\4f53', sans-serif;
  16. font-weight:;
  17. background: #efefef;
  18. -webkit-text-size-adjust: 100%;
  19. text-size-adjust: 100%;
  20. }
  21.  
  22. #countdown {
  23. width: 60%;
  24. margin: 20% auto;
  25. color: #ff4d4d;
  26. }
  27.  
  28. .countdown-day,
  29. .countdown-hour,
  30. .countdown-minute,
  31. .countdown-second {
  32. display: inline-block;
  33. margin: 0 .5rem;
  34. background: #ff3f0f;
  35. font-size: 2rem;
  36. font-weight:;
  37. color: #fff;
  38. }

2.再加载js文件,在此之前得先引入jquery

  1. <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.countdown-1.0.0.min.js"></script>

3.然后定义一个显示时间的元素,初始化配置后就可以看到计时啦

  1. <body>
  2. <div id="countdown"></div>
  3.  
  4. <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
  5. <script type="text/javascript" src="js/jquery.countdown-1.0.0.min.js"></script>
  6. <script>
  7. $('#countdown').countdown({
  8. //活动开始时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
  9. //优先采取元素的data-stime值(该值只能为时间戳格式)
  10. startTime: '2016/6/11 17:54:00',//活动结束时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
  11. //优先采取元素的data-etime值(该值只能为时间戳格式)
  12. endTime: '2016/6/11 17:55:00',
  13. //活动开始前倒计时的修饰
  14. //可自定义元素,例如"<span>距离活动开始倒计时还有:</span>"
  15. beforeStart: '距离活动开始倒计时还有:',
  16. //活动进行中倒计时的修饰
  17. //可自定义元素,例如"<span>距离活动截止还有:</span>"
  18. beforeEnd: '距离活动截止还有:',
  19. //活动结束后的修饰
  20. //可自定义元素,例如"<span>活动已结束</span>"
  21. afterEnd: '亲,活动结束啦,请继续关注哦!',
  22. //时间格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等)
  23. format: 'dd:hh:mm:ss',
  24. //活动结束后的回调函数
  25. callback: function() {
  26. console.log('亲,活动结束啦,请继续关注哦!');
  27. }
  28. });
  29. </script>
  30. </body>

然后附上countdown插件的源代码,大神们看了不要见笑哈...

  1. /**
  2. * 简单的jquery购物商城秒杀倒计时插件
  3. * @date 2016-06-11
  4. * @author TangShiwei
  5. * @email 591468061@qq.com
  6. */
  7. ;(function(factory) {
  8. "use strict";
  9. // AMD RequireJS
  10. if (typeof define === "function" && define.amd) {
  11. define(["jquery"], factory);
  12. } else {
  13. factory(jQuery);
  14. }
  15. })(function($) {
  16. "use strict";
  17. $.fn.extend({
  18. countdown: function(options) {
  19. if (options && typeof(options) !== 'object') {
  20. return false;
  21. }
  22. //默认配置
  23. var defaults = {
  24. //活动开始时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
  25. //优先采取元素的data-stime值(该值只能为时间戳格式)
  26. startTime: '2016/6/11 21:00:00',
  27. //活动结束时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
  28. //优先采取元素的data-etime值(该值只能为时间戳格式)
  29. endTime: '2016/6/11 24:00:00',
  30. //活动开始前倒计时的修饰
  31. //可自定义元素,例如"<span>距离活动开始倒计时还有:</span>"
  32. beforeStart: '距离活动开始倒计时还有:',
  33. //活动进行中倒计时的修饰
  34. //可自定义元素,例如"<span>距离活动截止还有:</span>"
  35. beforeEnd: '距离活动截止还有:',
  36. //活动结束后的修饰
  37. //可自定义元素,例如"<span>活动已结束</span>"
  38. afterEnd: '活动已结束',
  39. //时间格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等)
  40. format: 'dd:hh:mm:ss',
  41. //活动结束后的回调函数
  42. callback: function() {
  43. return false;
  44. }
  45. };
  46. //根据时间格式渲染对应结构
  47. var strategies = {
  48. "4": function($this, timeArr, desc) {
  49. return $this.html(desc + '<span class="countdown-day">' + timeArr[0] + '</span>天' +  '<span class="countdown-hour">' + timeArr[1] + '</span>时' + '<span class="countdown-minute">' + timeArr[2] + '</span>分' + '<span class="countdown-second">' + timeArr[3] + '</span>秒');
  50. },
  51. "3": function($this, timeArr, desc) {
  52. return $this.html(desc + '<span class="countdown-hour">' + timeArr[0] + '</span>时' + '<span class="countdown-minute">' + timeArr[1] + '</span>分' + '<span class="countdown-second">' + timeArr[2] + '</span>秒');
  53. },
  54. "2": function($this, timeArr, desc) {
  55. return $this.html(desc + '<span class="countdown-minute">' + timeArr[0] + '</span>分' + '<span class="countdown-second">' + timeArr[1] + '</span>秒');
  56. },
  57. "1": function($this, timeArr, desc) {
  58. return $this.html(desc + '<span class="countdown-second">' + timeArr[0] + '</span>秒');
  59. }
  60. };
  61. /**
  62. * [killTime 时间差换算并进行格式化操作]
  63. * @param {[Object]} _this_ [jquery对象]
  64. * @param {[Number]} sTime [当前时间]
  65. * @param {[Number]} eTime [结束时间]
  66. * @param {[String]} desc [时间修饰]
  67. * @param {[String]} format [时间格式]
  68. * @return {[Function]} strategies [根据格式渲染对应结构]
  69. */
  70. var killTime = function(_this_, sTime, eTime, desc, format) {
  71. var diffSec = (eTime - sTime) / 1000;
  72. var map = {
  73. h: Math.floor(diffSec / (60 * 60)) % 24,
  74. m: Math.floor(diffSec / 60) % 60,
  75. s: Math.floor(diffSec % 60)
  76. };
  77. var format = format.replace(/([dhms])+/g, function(match, subExp) {
  78. var subExpVal = map[subExp];
  79. if (subExpVal !== undefined) {
  80. if (match.length > 1) {
  81. subExpVal = '0' + subExpVal;
  82. subExpVal = subExpVal.substr(subExpVal.length - match.length);
  83. return subExpVal;
  84. }
  85. } else if (subExp === 'd') {
  86. if (match.length >= 1 && match.length < 4) {
  87. map[subExp] = Math.floor(diffSec / (60 * 60 * 24));
  88. var d = '00' + map[subExp];
  89. return d.substr(d.length - match.length);
  90. }
  91. }
  92. return match;
  93. });
  94. //将时间格式通过":"符号进行分组
  95. var timeArr = String.prototype.split.call(format, ':');
  96. /**
  97. * [render 通过分组情况渲染对应结构]
  98. * @param {[Object]} _this_ [jquery对象]
  99. * @param {[Number]} timeArrLen [时间分组后的数组长度]
  100. * @param {[Array]} timeArr [时间分组后的数组]
  101. * @param {[String]} desc [时间修饰]
  102. * @return {[Function]} strategies [根据数组长度渲染对应结构]
  103. */
  104. var render = function(_this_, timeArrLen, timeArr, desc) {
  105. return strategies[timeArrLen](_this_, timeArr, desc);
  106. };
  107. render(_this_, timeArr.length, timeArr, desc);
  108. }
  109. //覆盖默认配置
  110. var opts = $.extend({}, defaults, options);
  111. return this.each(function() {
  112. var $this = $(this);
  113. var _timer = null;
  114. //优先采取元素的data-stime值(该值只能为时间戳格式)
  115. var sTime = $this.data('stime') ? parseInt($this.data('stime'), 10) : (new Date(opts.startTime)).getTime();
  116. //优先采取元素的data-etime值(该值只能为时间戳格式)
  117. var eTime = $this.data('etime') ? parseInt($this.data('etime'), 10) : (new Date(opts.endTime)).getTime();
  118. if (_timer) {
  119. clearInterval(_timer);
  120. }
  121. _timer = setInterval(function() {
  122. var nowTime = (new Date()).getTime();
  123. if (nowTime < sTime) {
  124. //活动暂未开始
  125. killTime($this, nowTime, sTime, opts.beforeStart, opts.format);
  126. } else if (nowTime >= sTime && nowTime <= eTime) {
  127. //活动进行中
  128. killTime($this, nowTime, eTime, opts.beforeEnd, opts.format);
  129. } else {
  130. //活动已结束
  131. clearInterval(_timer);
  132. $this.html(opts.afterEnd);
  133. if (opts.callback && $.isFunction(opts.callback)) {
  134. opts.callback.call($this);
  135. }
  136. }
  137. }, 1000);
  138. });
  139. }
  140. });
  141. });

源代码

然后再来几个效果图吧:

第一次写jquery插件,来个countdown计时器吧的更多相关文章

  1. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  2. 写JQuery插件的基本知识

    普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: 复制代码 代码如下: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.exten ...

  3. [原创作品]手把手教你怎么写jQuery插件

    这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...

  4. 写jQuery插件时,一种更好的合并参数的方法

    看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...

  5. 写JQuery 插件

    什么?你还不会写JQuery 插件 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再 ...

  6. 自写Jquery插件 Tab

    原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067017.html 每每看到别人写的Jquery插件,自己也试着学习尝试,终有结果,废话不多 ...

  7. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  8. 什么?你还不会写JQuery 插件

    前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...

  9. 写JQuery 插件 什么?你还不会写JQuery 插件

    http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...

随机推荐

  1. 自己动手写中文分词解析器完整教程,并对出现的问题进行探讨和解决(附完整c#代码和相关dll文件、txt文件下载)

    中文分词插件很多,当然都有各自的优缺点,近日刚接触自然语言处理这方面的,初步体验中文分词. 首先感谢harry.guo楼主提供的学习资源,博文链接http://www.cnblogs.com/harr ...

  2. Node.js的学习--使用cheerio抓取网页数据

    打算要写一个公开课网站,缺少数据,就决定去网易公开课去抓取一些数据. 前一阵子看过一段时间的Node.js,而且Node.js也比较适合做这个事情,就打算用Node.js去抓取数据. 关键是抓取到网页 ...

  3. Android进程间通信之LocalSocket通信

    LocalSocket,在Unix域名空间创建的一个套接字(非服务端). 是对Linux中Socket进行了封装,采用JNI方式调用,实现进程间通信. 具体就是Native层Server和Framew ...

  4. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. Halcon与MFC交互编程

    Halcon是商业化的机器视觉软件.网上下了halcon10的破解版,安装后编写了个图像显示的MFC小程序. 编译器用的是VS2008. 1 配置halcon环境 新建为MFC后,在VC++目录中配置 ...

  6. Pig 实现关键词匹配

    1. 问题描述 收集日志avro数据中有两个Map字段appInstall.appUse分别表示已安装的app.正在使用的app,且key值为app的名称,value值为app使用信息.现在要得到一份 ...

  7. 《ASP.NET SignalR系列》第五课 在MVC中使用SignalR

    接着上一篇:<ASP.NET SignalR系列>第四课 SignalR自托管(不用IIS) 一.概述 本教程主要阐释了如何在MVC下使用ASP.NET SignalR. 添加Signal ...

  8. Git for Windows v2.11.0 Release Notes

    homepage faq contribute bugs questions Git for Windows v2.11.0 Release Notes Latest update: December ...

  9. easyui的window插件再次封装

    easyui的window插件再次封装 说明:该插件弹出的弹出框在最顶层的页面中,而不是在当前页面所在的iframe中,它的可拖动范围是整个浏览器窗口:所以不能用JS的parent对象获取弹出它的父页 ...

  10. EditText html 出现提示 This text field does not specify an inputType or a hint

      1 <EditText 2 android:layout_width="fill_parent" 3 android:layout_height="wrap_c ...