第一次写jquery插件，来个countdown计时器吧
之前同学做个购物商城秒杀活动需要计时器的功能，在用jquery提供的countdown插件时，一直报错，貌似还需要依赖除jquery之外的其他插件，搞了半天也没搞成功，就叫我帮忙写个。然而我并没有写过插件，不过刚好趁这次端午好好地锻炼一把吧，顺便在这儿存个代码，自己的思路不好，大神们请不要见笑哈...
废话不多说，直接上代码：
=======================================请叫我华丽的分割线=======================================
先展示一下插件调用方式：
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:;
padding:;
-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:;
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:;
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计时器吧的更多相关文章
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- 写JQuery插件的基本知识
普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: 复制代码 代码如下: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.exten ...
- [原创作品]手把手教你怎么写jQuery插件
这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...
- 写jQuery插件时，一种更好的合并参数的方法
看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...
- 写JQuery 插件
什么?你还不会写JQuery 插件 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再 ...
- 自写Jquery插件 Tab
原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067017.html 每每看到别人写的Jquery插件,自己也试着学习尝试,终有结果,废话不多 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- 什么？你还不会写JQuery 插件
前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...
- 写JQuery 插件 什么？你还不会写JQuery 插件
http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...
随机推荐
- ASP.NET MVC 4.0中选择Windows 验证默认出错拒绝访问的原因和解决方案
在VS 2012或者2013 中,根据模板创建一个ASP.NET MVC 4.0的应用程序,选择下面的模板 然后选择Intranet Application 不对源代码做任何修改,直接按下F5调试,会 ...
- java Class对象
目录 1Class对象 普通的Class对象 泛化的Class对象 2类型转换前先做检查 instanceof 运算符的陷阱 Class.isInstance() 3反射 动态代理 1.Cla ...
- 各种排序学习归纳总结(Java)
排序总结 根据<数据结构与算法分析——Java语言描述><INTRODUCTION TO JAVA PROGRAMMING>.维基及各技术博客知识点来总结的. 如果刚入门学习 ...
- Java魔法堂：解读基于Type Erasure的泛型
一.前言 还记得JDK1.4时遍历列表的辛酸吗?我可是记忆犹新啊,那时因项目需求我从C#转身到Java的怀抱,然后因JDK1.4少了泛型这样语法糖(还有自动装箱.拆箱),让我受尽苦头啊,不过也反映自己 ...
- SpringAOP使用扩展
在<初识Spring>中我们了解到Spring支持AOP且可配置方法的前置曾强和后置曾强,但其实Spring支持多种曾强类型.下面同过一些例子来介绍Spring的几种常用的曾强(前置增强和 ...
- C# 异步工具类 及一点小小的重构经验
2015年新年第一篇随笔, 祝福虽然有些晚,但诚意还在:新年快乐. 今天主要是想分享一异步工具类,在C/S架构中.先进行网络资源异步访问,然后将回调函数 Invoke到UI线程中进行UI处理. 这样的 ...
- 【FTP】C# System.Net.FtpClient库连接ftp服务器(上传文件)
如果自己单枪匹马写一个连接ftp服务器代码那是相当恐怖的(socket通信),有一个评价较高的dll库可以供我们使用. 那就是System.Net.FtpClient,链接地址:https://net ...
- Web API应用架构在Winform混合框架中的应用（5）--系统级别字典和公司级别字典并存的处理方式
在我这个系列中,我主要以我正在开发的云会员管理系统为例进行介绍Web API的应用,由于云会员的数据设计是支持多个商家公司,而每个公司又可以包含多个店铺的,因此一些字典型的数据需要考虑这方面的不同.如 ...
- grep命令的使用
grep是UNIX和LINUX中使用最广泛的命令之一.grep允许对文本文件进行模式查找.如果找到匹配模式, grep打印包含模式的所有行.grep支持基本正则表达式,也支持其扩展集.grep有三种变 ...
- Android调用系统自带的设置界面
Android有很多系统自带的设置界面,如设置声音,设置网络等. 在开发中可以调用这些系统自带的设置界面. 点击以下列表中的选项,就可以调出相应的系统自带的设置界面. 如点击“无线和网络设置”,可以调 ...