jQuery基于扩展简单实现倒计时功能的方法


Posted in Javascript onMay 14, 2016

本文实例讲述了jQuery基于扩展简单实现倒计时功能的方法。分享给大家供大家参考,具体如下:

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() {
    //where do we start?
    if(!to && to != settings.endNumber) { to = settings.startNumber; }
    //set the countdown to the starting number
    $(this).text(to).css('fontSize',settings.startFontSize);
    //loopage
    $(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);
      }
    });
  });
};
/* sample usage
//调用方法
//
$('#countdown').countDown({
  startNumber: 10,
  callBack: function(me) {
    $(me).text('倒计时加载完毕').css('color','#090');
  }
});

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
通过JAVAScript实现页面自适应
Jan 19 Javascript
javascript TextArea动态显示剩余字符
Oct 22 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
jquery动态切换背景图片的简单实现方法
May 14 #Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 #Javascript
jQuery基于扩展实现的倒计时效果
May 14 #Javascript
Angularjs中UI Router的使用方法
May 14 #Javascript
两种js监听滚轮事件的实现方法
May 13 #Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 #Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 #Javascript
You might like
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
PHP系统流量分析的程序
2006/10/09 PHP
PHP4实际应用经验篇(6)
2006/10/09 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python实现五子棋人机对战游戏
2020/03/25 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
keras的三种模型实现与区别说明
2020/07/03 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
2014庆六一活动方案
2014/03/02 职场文书
经典毕业生求职信
2014/07/12 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
Python极值整数的边界探讨分析
2021/09/15 Python
Pandas 数据编码的十种方法
2022/04/20 Python