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

 更新时间:2016年05月14日 12:09:08   作者:懒人  
这篇文章主要介绍了jQuery基于扩展简单实现倒计时功能的方法,涉及jQuery扩展与回调函数的相关使用技巧,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jQuery日期与时间操作技巧总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结

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

相关文章

  • JQuery处理json与ajax返回JSON实例代码

    JQuery处理json与ajax返回JSON实例代码

    json数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法
    2014-01-01
  • 自己动手开发jQuery插件教程

    自己动手开发jQuery插件教程

    首先要了解jQuery插件开发分两种,1.类级别的插件开发。2.对象级别插件开发。什么? 你居然问什么是类级别和什么是对象级别?
    2011-08-08
  • Jquery性能优化详解

    Jquery性能优化详解

    寻寻觅觅,觅觅寻寻终于找到了一些关于jquery性能优化的文章,果断收藏当然不能忘了加上自己的一些总结及理解。
    2014-05-05
  • jQuery控制div实现随滚动条滚动效果

    jQuery控制div实现随滚动条滚动效果

    这篇文章主要介绍了jQuery控制div实现随滚动条滚动效果,对比分析了两种实现方法供大家参考选择,需要的朋友可以参考下
    2016-06-06
  • 完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效

    完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效

    本文是作者学习jQuery之后练手之作,兼容各大浏览器,非常的精美实用,这里放出来给小伙伴们,有需要的直接拿走,别跟我客气^_^
    2014-11-11
  • jquery ajax请求实例深入解析

    jquery ajax请求实例深入解析

    jquery中封装了一些ajax请求的方法,很实用,本文将以此引入一个实例,对jquery中ajax请求的方法进行详细介绍,需要了解更多的朋友可以参考下
    2012-11-11
  • jQuery DIV弹出效果实现代码

    jQuery DIV弹出效果实现代码

    现在很多网站都流行这种弹出式的对话框或是信息显示框,很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中,与业界朋友们起分享。
    2009-07-07
  • 文本框的字数限制功能jquery插件

    文本框的字数限制功能jquery插件

    由于Html里只有input元素拥有maxlength属性,而textarea没有,所以以前对于文本框字数限制做了很多方案的解决,但是都不太完美。
    2009-11-11
  • 从零开始学习jQuery (五) jquery事件与事件对象

    从零开始学习jQuery (五) jquery事件与事件对象

    事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解.
    2011-02-02
  • 用jQuery.ajaxSetup实现对请求和响应数据的过滤

    用jQuery.ajaxSetup实现对请求和响应数据的过滤

    本文主要对用jQuery.ajaxSetup实现对请求和响应数据的过滤的过程与方法进行详细全面的实例讲解。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12

最新评论