首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于jquery插件编写countdown计时器

Posted in Javascript onJune 12, 2016

废话不多说，直接上代码：
先展示一下插件调用方式： 

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

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

css代码内容:

* {
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

html,
body {
 font: 24px/1.5 'Microsoft YaHei', arial, tahoma, '\5b8b\4f53', sans-serif;
 font-weight: 700;
 background: #efefef;
 -webkit-text-size-adjust: 100%;
 text-size-adjust: 100%;
}

#countdown {
 width: 60%;
 margin: 20% auto;
 color: #ff4d4d;
}

.countdown-day,
.countdown-hour,
.countdown-minute,
.countdown-second {
 display: inline-block;
 margin: 0 .5rem;
 background: #ff3f0f;
 font-size: 2rem;
 font-weight: 700;
 color: #fff;
}

2.再加载js文件，在此之前得先引入jquery
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown-1.0.0.min.js"></script>
3.然后定义一个显示时间的元素，初始化配置后就可以看到计时啦

<body>
 <div id="countdown"></div>

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

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

/**
 * 简单的jquery购物商城秒杀倒计时插件
 * @date 2016-06-11
 * @author TangShiwei
 * @email 591468061@qq.com
 */
;(function(factory) {
 "use strict";
 // AMD RequireJS
 if (typeof define === "function" && define.amd) {
  define(["jquery"], factory);
 } else {
  factory(jQuery);
 }
 })(function($) {
 "use strict";
 $.fn.extend({
  countdown: function(options) {
  if (options && typeof(options) !== 'object') {
  return false;
  }
  //默认配置
  var defaults = {
  //活动开始时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
  //优先采取元素的data-stime值(该值只能为时间戳格式)
  startTime: '2016/6/11 21:00:00',
  //活动结束时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
  //优先采取元素的data-etime值(该值只能为时间戳格式)   
  endTime: '2016/6/11 24:00:00',
  //活动开始前倒计时的修饰
  //可自定义元素,例如"<span>距离活动开始倒计时还有:</span>"   
  beforeStart: '距离活动开始倒计时还有:',
  //活动进行中倒计时的修饰 
  //可自定义元素,例如"<span>距离活动截止还有:</span>" 
  beforeEnd: '距离活动截止还有:',
  //活动结束后的修饰
  //可自定义元素,例如"<span>活动已结束</span>"    
  afterEnd: '活动已结束',
  //时间格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等)     
  format: 'dd:hh:mm:ss',
  //活动结束后的回调函数     
  callback: function() {     
  return false;
  }
  };
  //根据时间格式渲染对应结构
  var strategies = {
  "4": function($this, timeArr, desc) {
  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>秒');
  },
  "3": function($this, timeArr, desc) {
  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>秒');
  },
  "2": function($this, timeArr, desc) {
  return $this.html(desc + '<span class="countdown-minute">' + timeArr[0] + '</span>分' + '<span class="countdown-second">' + timeArr[1] + '</span>秒');
  },
  "1": function($this, timeArr, desc) {
  return $this.html(desc + '<span class="countdown-second">' + timeArr[0] + '</span>秒');
  }
  };
  /**
  * [killTime 时间差换算并进行格式化操作]
  * @param {[Object]} _this_ [jquery对象]
  * @param {[Number]} sTime [当前时间]
  * @param {[Number]} eTime [结束时间]
  * @param {[String]} desc [时间修饰]
  * @param {[String]} format [时间格式]
  * @return {[Function]} strategies [根据格式渲染对应结构]
  */
  var killTime = function(_this_, sTime, eTime, desc, format) {
  var diffSec = (eTime - sTime) / 1000;
  var map = {
  h: Math.floor(diffSec / (60 * 60)) % 24,
  m: Math.floor(diffSec / 60) % 60,
  s: Math.floor(diffSec % 60)
  };
  var format = format.replace(/([dhms])+/g, function(match, subExp) {
  var subExpVal = map[subExp];
  if (subExpVal !== undefined) {
   if (match.length > 1) {
   subExpVal = '0' + subExpVal;
   subExpVal = subExpVal.substr(subExpVal.length - match.length);
   return subExpVal;
   }
  } else if (subExp === 'd') {
   if (match.length >= 1 && match.length < 4) {
   map[subExp] = Math.floor(diffSec / (60 * 60 * 24));
   var d = '00' + map[subExp];
   return d.substr(d.length - match.length);
   }
  }
  return match;
  });
  //将时间格式通过":"符号进行分组
  var timeArr = String.prototype.split.call(format, ':');
  /**
  * [render 通过分组情况渲染对应结构]
  * @param {[Object]} _this_ [jquery对象]
  * @param {[Number]} timeArrLen [时间分组后的数组长度]
  * @param {[Array]} timeArr [时间分组后的数组]
  * @param {[String]} desc [时间修饰]
  * @return {[Function]} strategies [根据数组长度渲染对应结构]
  */
  var render = function(_this_, timeArrLen, timeArr, desc) {
  return strategies[timeArrLen](_this_, timeArr, desc);
  };
  render(_this_, timeArr.length, timeArr, desc);
  }
  //覆盖默认配置
  var opts = $.extend({}, defaults, options);
  return this.each(function() {
  var $this = $(this);
  var _timer = null;
  //优先采取元素的data-stime值(该值只能为时间戳格式)
  var sTime = $this.data('stime') ? parseInt($this.data('stime'), 10) : (new Date(opts.startTime)).getTime();
  //优先采取元素的data-etime值(该值只能为时间戳格式)
  var eTime = $this.data('etime') ? parseInt($this.data('etime'), 10) : (new Date(opts.endTime)).getTime();
  if (_timer) {
  clearInterval(_timer);
  }
  _timer = setInterval(function() {
  var nowTime = (new Date()).getTime();
  if (nowTime < sTime) {
   //活动暂未开始
   killTime($this, nowTime, sTime, opts.beforeStart, opts.format);
  } else if (nowTime >= sTime && nowTime <= eTime) {
   //活动进行中
   killTime($this, nowTime, eTime, opts.beforeEnd, opts.format);
  } else {
   //活动已结束
   clearInterval(_timer);
   $this.html(opts.afterEnd);
   if (opts.callback && $.isFunction(opts.callback)) {
   opts.callback.call($this);
   }
  }
  }, 1000);
  });
  }
 });
 });

 然后再来几个效果图吧:

基于jquery插件编写countdown计时器

精彩专题分享：js实现倒计时功能汇总

以上就是本文的全部内容，希望对大家学习jQuery有所帮助

基于jquery插件编写countdown计时器

- Author -

爱邱

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
Jquery Easyui菜单组件Menu使用详解（15）
Dec 18 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 #Javascript
浅谈jquery的map()和each()方法
Jun 12 #Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 #Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 #Javascript
使用Script元素发送JSONP请求的方法
Jun 12 #Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 #Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 #Javascript
Quartz(1) 注解(1) dataBinding(1) BottomSheetDialog(1) HttpClient(1) RestTemplate(1) scrapy(1) Hive(5) 反射(1) ip2region(1)
You might like
PHP的加密方式及原理
2012/06/14 PHP
php 购物车完整实现代码
2014/06/05 PHP
教大家制作简单的php日历
2015/11/17 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
在layui中select更改后生效的方法
2019/09/05 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
对vue生命周期的深入理解
2020/12/03 Vue.js
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Python重新加载模块的实现方法
2018/10/16 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
销售员个人求职的自我评价
2014/02/10 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
介绍信格式
2015/01/30 职场文书
酒桌上的开场白
2015/06/01 职场文书
导游词之神仙居景区
2019/11/15 职场文书