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中实现块作用域的方法
Apr 01 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
jquery图片切换实例分析
Apr 15 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
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之字符串变相相减的代码
2007/03/19 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python中用于计算对数的log()方法
2015/05/15 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Python模块的制作方法实例分析
2019/12/21 Python
Python使用configparser库读取配置文件
2020/02/22 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
大学生农村教师实习自我鉴定
2013/09/21 职场文书
初一体育教学反思
2014/01/29 职场文书
函授自我鉴定范文
2014/02/06 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL