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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
Javascript缓存API
Jun 14 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
JS实现留言板功能
Jun 17 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 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中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Python 操作文件的基本方法总结
2017/08/10 Python
详解Python中的正则表达式
2018/07/08 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
详解Python3定时器任务代码
2019/09/23 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
幼儿园大班评语大全
2014/04/17 职场文书
装修施工安全责任书
2014/07/24 职场文书
假释思想汇报范文
2014/10/11 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书