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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
javascript之可拖动的iframe效果代码
Aug 01 Javascript
javascript 写类方式之七
Jul 05 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 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采集利器 Snoopy 试用心得
2011/07/03 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
英国现代市场:ARKET
2019/04/10 全球购物
租赁意向书范本
2014/04/01 职场文书
绘画专业自荐信
2014/07/04 职场文书
2014年就业工作总结
2014/11/26 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
六年级作文之自救
2019/12/19 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python