jquery插件jquery倒计时插件分享
代码如下:
$(document).ready(function () {
/* 延迟函数 */
jQuery.fn.delay = function (time, func) {
return this.each(function () {
setTimeout(func, time);
});
};
jQuery.fn.countDown = function (settings, to) {
settings = jQuery.extend({
startFontSize: '36px',
endFontSize: '12px',
duration: 1000,
startNumber: 10,
endNumber: 0,
callBack: function () { }
}, settings);
return this.each(function () {
if (!to && to != settings.endNumber) { to = settings.startNumber; }
//设定倒计时开始的号码
$(this).text(to).css('fontSize', settings.startFontSize);
//页面动画
$(this).animate({
'fontSize': settings.endFontSize
}, settings.duration, '', function () {
if (to > settings.endNumber + 1) {
$(this).css('fontSize', settings.startFontSize).text(to - 1).countDown(settings, to - 1);
}
else {
settings.callBack(this);
}
});
});
};
//使用
$('#countdown').countDown({
startNumber: 10,
callBack: function (me) {
$(me).text('All done! This is where you give the reward!').css('color', '#090');
}
});
});
上一篇: HTML代码注释、IE条件注释详解
推荐阅读
-
jQuery插件jsonview展示json数据
-
jQuery插件Validation表单验证详解
-
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
-
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
-
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
-
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
-
jQuery插件zTree实现单独选中根节点中第一个节点示例
-
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
-
jQuery插件扩展操作入门示例
-
jQuery表单插件ajaxForm实例详解