首页
所有分类
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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
vue时间格式化实例代码
Jun 13 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
JS Html转义和反转义（html编码和解码）的实现与使用方法总结
Mar 10 Javascript
跨域请求的完美解决方法(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
ip连接(1) GTID(1) mixin(1) props(1) ref(1) 表变量(1) 游标(1) 临时表(1) ECharts(3) timestamp(1)
You might like
PHP中的正则表达式函数介绍
2012/02/27 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
jQuery之折叠面板的深入解析
2013/06/19 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
vue页面使用阿里oss上传功能的实例（一）
2017/08/09 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
python进阶教程之函数对象（函数也是对象）
2014/08/30 Python
python实现红包裂变算法
2016/02/16 Python
python 实时遍历日志文件
2016/04/12 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
基于python实现名片管理系统
2018/11/30 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
canvas像素画板的实现代码
2018/11/21 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
海淘零差价，宝贝全球购： 宝贝格子
2016/08/24 全球购物
美国购买和销售礼品卡平台：Raise
2017/01/13 全球购物
英国乡村时尚和宠物用品专家：Pet & Country
2018/07/02 全球购物
泰国第一在线超市：Tops
2021/02/13 全球购物
生育关怀行动实施方案
2014/03/26 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
最新最全的手机号验证正则表达式
2022/02/24 Javascript