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 相关文章推荐
JS面向对象编程浅析
Aug 28 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
js实现表格单列按字母排序
Aug 12 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
python 正则式使用心得
2009/05/07 Python
python提取内容关键词的方法
2015/03/16 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python配置grpc环境
2019/01/01 Python
Python telnet登陆功能实现代码
2020/04/16 Python
如何使用Python调整图像大小
2020/09/26 Python
社区学雷锋活动策划方案
2014/01/30 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
小学生读书活动总结
2014/06/30 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技