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 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
vue获取当前激活路由的方法
Mar 17 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
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 错误处理机制
2015/07/06 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
《javascript少儿编程》location术语总结
2018/05/27 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Python加速程序运行的方法
2020/07/29 Python
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
入党转预备思想汇报
2014/01/07 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
四年级学生期末评语
2014/12/26 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
nginx.conf配置文件结构小结
2022/04/08 Servers