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 相关文章推荐
html+js实现动态显示本地时间
Sep 21 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
JS数组去重详情
Nov 07 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
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
JS类的封装及实现代码
2009/12/02 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
css sprite简单实例
2016/05/23 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
求职简历自荐信范文
2013/10/21 职场文书
工作推荐信范文
2014/05/10 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
导游词之广西漓江
2019/11/02 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js