sucks倒计时插件笔记
jQuery.fn.countdown = function(userOptions) {
// Default options
var options = {
stepTime: 60,
// startTime 和 format 必须设置一样的格式.
format: "dd:hh:mm:ss",
startTime: "01:00:00:00",
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function() {},
image: "digits.png"
};
//digits数字对象(HTML元素)数组,interval定时器变量
var digits = [],
interval;
// 创建时钟
var createDigits = function(where) {
var c = 0; //startTime中当前字符
options.startTime = options.startTime.split('');
options.format = options.format.split('');
//循环startTime中的所有字符
for (var i = 0; i < options.startTime.length; i++) {
//如果是数字的话
if (parseInt(options.startTime[i]) >= 0) {
//创建HTML对象(elem)并设置CSS的高度宽度浮动
elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
height: options.digitHeight * options.digitImages * 10,
float: 'left',
background: 'url(\'' + options.image + '\')',
width: options.digitWidth
});
digits.push(elem); //将elem压进digits数组
margin(c, -((parseInt(options.startTime[i]) * options.digitHeight * options.digitImages))); //设置elem的margin-top值,c是当前字符的序号,代表dd:hh:mm:ss中的第几位,当前的数字*数字的高度*一个数字由几张图片组成
digits[c].__max = 9; //设置元素的最大值为9
//通过格式设置元素最大值
switch (options.format[i]) {
//设置小时的最大值
case 'h':
digits[c].__max = (c % 2 == 0) ? 2 : 9;
if (c % 2 == 0) digits[c].__condmax = 4;
break;
//设置天数的最大值
case 'd':
digits[c].__max = 2;
break;
//设置分钟跟秒的最大值
case 'm':
case 's':
digits[c].__max = (c % 2 == 0) ? 5 : 9; //两位数,c%2==0代表前面那位最大值为5,c%2!=0代表后面那位最大值是9,例如59秒
}++c; //当前元素序号自加
} else
//如果不是数字,则按照日期格式中的字符创建元素分隔符例如dd:mm:ss则按照“:”创建;或者dd天hh小时则按照xx天xx小时创建
elem = $('<div class="cntSeparator"/>').css({
float: 'left'
}).text(options.startTime[i]);
//添加HTML元素
where.append(elem);
}
};
// 通过传过来的c设置或者取得digits中元素的margin-top值
var margin = function(elem, val) {
//如果传了val的话则设置
if (val !== undefined) return digits[elem].css({
'marginTop': val + 'px'
});
//如果没传val则返回
return parseInt(digits[elem].css('marginTop').replace('px', ''));
};
//设置移动动画
var moveStep = function(elem) {
digits[elem]._digitInitial = -(digits[elem].__max * options.digitHeight * options.digitImages); //数字最大的margin-top值
//执行运动函数
return function _move() {
mtop = margin(elem) + options.digitHeight; //获得元素的起始margin-top值
//如果起始值等于数字的高度
if (mtop == options.digitHeight) {
//设置元素的margin-top值为数字最大的marign-top值
margin(elem, digits[elem]._digitInitial);
//从最后一位(最右面)开始,如果数字大于0则调用递归显示前一位数字
if (elem > 0) moveStep(elem - 1)();
//否则如果数字全是0的话
else {
//清除定时器
clearInterval(interval);
//设置数字全为0
for (var i = 0; i < digits.length; i++) margin(i, 0);
//调用回调函数
options.timerEnd();
return;
}
//如果有数字(elem>0)并且有数字最大值(digits[elem].__condmax !== undefined)并且数字的最大margin-top值等于当前的margin-top则说明一个数字翻页动画完毕
if ((elem > 0) && (digits[elem].__condmax !== undefined) && (digits[elem - 1]._digitInitial == margin(elem - 1)))
//设置当前数字的margin-top值为最大margin-top值
margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
return;
}
margin(elem, mtop); //设置元素的margin-top值
//如果当前的数字元素不为0
if (margin(elem) / options.digitHeight % options.digitImages != 0)
//按照参数设置中的stepTime多少时间后执行运动动画
setTimeout(_move, options.stepTime);
//如果margin-top等于0的话,说明在图片的最上面
if (mtop == 0) digits[elem].__ismax = true;
}
};
$.extend(options, userOptions); //拷贝用户设置的参数
this.css({
height: options.digitHeight,
overflow: 'hidden'
}); //按照用户设置的高度设置数字高度
createDigits(this); //创建数字对象
interval = setInterval(moveStep(digits.length - 1), 1000); //创建定时器并调用运动函数
};
转载于:https://www.cnblogs.com/baie/archive/2012/10/18/2729319.html
sucks倒计时插件笔记相关推荐
- jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- jQuery自适应倒计时插件
jQuery自适应倒计时插件 在线演示本地下载 更多专业前端知识,请上 [猿2048]www.mk2048.com
- dedeCMS 静态页面的倒计时插件(原生VS自定义)
文章目录 一.动画效果 · 修改前后对比 二.修改文件的`路径`&&`名称`: 第一种方法:(自定义封装函数`daojishi()`) 首先: 然后: 第二种方法:(调用系统自带的函数 ...
- 8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互.下面向大家分享8个优秀的 jQuery倒计时插件和教程. jQu ...
- html广告20s倒计时,简单时尚的jQuery倒计时插件
SyoTimer是一款简单时尚的jQuery倒计时插件.该计时器插件支持IE8+的现代浏览器,它的界面简洁,功能齐全.它的特点还有: 在计时器计时结束之后的回调函数中可以修改计时器的结构. 可以周期的 ...
- 榛子云短信-微信小程序60秒倒计时插件
为了帮助开发者更便捷的使用微信小程序的短信验证码功能,特别是初学者更好的使用,榛子云短信特地开发了60秒倒计时插件,效果: 使用方法 1.引入插件countdown.js var CountDown ...
- 漂亮实用的jQuery倒计时插件特效代码
原文:漂亮实用的jQuery倒计时插件特效代码 源代码下载地址:http://www.zuidaima.com/share/1799598875675648.htm
- jquery.countdown 倒计时插件的学习
1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...
- js/jq 倒计时插件(一)
//很多时候我们需要用到倒计时比如(一些发布会倒计时,秒杀倒计时,活动倒计时等),接下来将介绍两种倒计时插件的写法 //html结构 <!DOCTYPE html> <html la ...
- html5 倒计时插件,基于HTML5 time元素的倒计时jquery插件
这是一款简单的基于HTML5 time元素的倒计时jquery插件.该jquery倒计时插件提供默认的翻牌样式,可以在所有支持HTML5 time元素的浏览器中正常工作. 安装 可以通过npm来安装j ...
最新文章
- vue中 .sync 修饰符 个人理解
- java中正则表达式并集_对Java中正则表达式的一些理解
- vlc学习计划(5)--VLC程序宏及线程分析
- 报考python工程师要求_国家认证的Python技术工程师有什么能力要求?
- 嵌套游标以生成复杂的报表
- [JavaScript][转]offsetParent和parentElement的区别
- 数据库杂谈(七)——数据库的存储结构
- 安装linux前分区,安装Linux系统前的准备之磁盘分区
- 9.FreeRTOS学习笔记-任务通知
- 威盾VIACONTROL远程监控注册机及试用手记
- python dict排序
- 今天我们来聊一个很高级的话题:如何设计一个大规模远程命令执行系统
- 【其实是空空荡荡的牵挂,没有结局的怀念】
- 微博相册下载助手v7.2 微博图片批量下载神器
- 看看中国科技巨头们在智能音箱行业的竞争
- java holder详解,Java基础系列18:Holder技术的实现原理分析
- 原创|实时数仓实战项目-第三节(数仓治理)
- 数学建模——公交调度优化
- mail 465邮件配置
- 用REM解决多屏适配
热门文章
- linux解决用户权限不够问题
- Byte,Kb,Mb,Gb,Tb,Pb,Eb,Zb,Yb,Bb单位换算
- 浅谈LSTM对于周期时间序列数据的预测
- Git的下载安装教程
- warning: cast to pointer from integer of different size [-Wint-to-pointer-cast]
- 【python】Python学到什么程度可以面试工作(解答一)
- python怎么识别拼音-python+拼音
- 使用opencv转化图片格式
- 电子计算机扫描仪系统,人体三维扫描仪
- 高中数学知识点总结归纳之立体几何