jquery插件jquery倒计时插件分享


Posted in Javascript onDecember 27, 2013
$(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');
                }
            });
        });
Javascript 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
vue如何将v-for中的表格导出来
May 07 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 #Javascript
window.open打开页面居中显示的示例代码
Dec 27 #Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 #Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 #Javascript
JS 数字转换研究总结
Dec 26 #Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 #Javascript
js几秒以后倒计时跳转示例
Dec 26 #Javascript
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
php metaphone()函数的定义和用法
2016/05/15 PHP
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Python中多线程及程序锁浅析
2015/01/21 Python
Python、Javascript中的闭包比较
2015/02/04 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Python 多进程、多线程效率对比
2020/11/19 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
中间件分为哪几类
2016/09/18 面试题
厨师长岗位职责
2014/03/02 职场文书
调解协议书
2014/04/16 职场文书
先进员工获奖感言
2014/08/14 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python