首页
所有分类
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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参
Jan 06 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
详解ionic本地相册、拍照、裁剪、上传（单图完全版）
Oct 10 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 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
OVERLORD(1) 2022年7月新番(1) 时钟(1) Vscode(3) 人人对战(1) 双人对弈(1) 数据表(1) SSH(3) 算法(1) mysql(6)
You might like
php+mysql实现简单的增删改查功能
2015/07/13 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
php源码的使用方法讲解
2019/09/26 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python构建深度神经网络（DNN）
2018/03/10 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
python多线程并发实例及其优化
2019/06/27 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
小天鹅官方商城：LittleSwan
2017/06/16 全球购物
Lookfantastic挪威官网：英国知名美妆购物网站
2017/07/26 全球购物
台湾最大银发乐活百货：乐龄网
2018/05/21 全球购物
新学期红领巾广播稿
2014/01/14 职场文书
《去年的树》教学反思
2014/04/11 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
研讨会致辞
2015/07/31 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
代码解析React中setState同步和异步问题
2021/06/03 Javascript