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 相关文章推荐
学习YUI.Ext 第七天--关于View&JSONView
Mar 10 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
javaScript基础详解
Jan 19 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
常用js脚本
2006/12/03 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python二分法搜索算法实例分析
2015/05/11 Python
python中引用与复制用法实例分析
2015/06/04 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python去掉空白行的多种实现代码
2018/03/19 Python
如何基于python测量代码运行时间
2019/12/25 Python
Python如何读写二进制数组数据
2020/08/01 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
机械绘图员岗位职责
2013/11/19 职场文书
应聘教师求职信范文
2015/03/20 职场文书
银行服务理念口号
2015/12/25 职场文书
Python基础知识之变量的详解
2021/04/14 Python