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 各浏览器的 Javascript 效率对比
Jan 23 Javascript
javascript的push使用指南
Dec 05 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
详解elementUI中input框无法输入的问题
Apr 27 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运行环境配置的详解
2013/06/04 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
php图片添加水印例子
2016/07/20 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
List Installed Software Features
2007/06/11 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
从0开始的Python学习016异常
2019/04/08 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
退休教师欢送会主持词
2014/03/31 职场文书
淘宝好评语大全
2014/05/05 职场文书
公司募捐倡议书
2014/05/14 职场文书
节约能源标语
2014/06/17 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
小学师德师风整改措施
2014/10/27 职场文书
先进班集体事迹材料
2014/12/25 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
戒赌保证书
2015/05/11 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL