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现实多行信息
Aug 26 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
javascript 动态创建表格
Jan 08 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php自动跳转中英文页面
2008/07/29 PHP
php 页面执行时间计算代码
2008/12/04 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Python装饰器用法实例总结
2018/05/26 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
在python里面运用多继承方法详解
2019/07/01 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
新闻记者实习自我鉴定
2013/09/19 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
社区科普工作方案
2014/06/03 职场文书
停课通知书
2015/04/24 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python