jQuery基于扩展简单实现倒计时功能的方法

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery实现倒计时跳转的例子

    实现代码: 复制代码 代码如下: <html>   <head>   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />    <title>跳转页面</title>      <script src="jquery.js"></script>    <script la

  • 整理8个很棒的 jQuery 倒计时插件和教程

    整理8个很棒的 jQuery 倒计时插件和教程

    jQuery 倒计时插件和教程. jQuery Countdown spriteTimer php ajax/jquery countdown Add a Countdown Timer on Your Website jQuery Flipclock Fancy Countdown Cool jQuery Countdown Joomla jQuery Countdown

  • Jquery倒计时源码分享

    Jquery倒计时源码分享

    在静态页添加显示倒计时的容器,并引用下面脚本,代入时间参数即可使用. timeoutDate--到期时间,时间格式为2014/01/01或2014/1/1 D--天 H--小时 M--分钟 S--秒 xs--数字0~9 效果图: 代码展示: html: 复制代码 代码如下: <span id="top_tuan_countdown"></span> jquery: 复制代码 代码如下: $().ready(function () {    CcountDown(

  • 基于jQuery的倒计时实现代码

    在线演示:http://demo.jb51.net/js/2012/mydaojishi/打包下载:mydaojishi_jb51核心代码: 复制代码 代码如下: $(function(){ var tYear = ""; //输入的年份 var tMonth = ""; //输入的月份 var tDate = ""; //输入的日期 var iRemain = ""; //开始和结束之间相差的毫秒数 var sDate =

  • 基于jQuery倒计时插件实现团购秒杀效果

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

  • JQuery实现倒计时按钮具体方法

    复制代码 代码如下: <head>    <title>test count down button</title>    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>    <script type="text/javascri

  • JQuery仿小米手机抢购页面倒计时效果

    1.效果及功能说明 通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒. 2.实现原理 首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的还有多少的时间就把还剩下的时间给显示出来就得出了离截止日期还有多久. 主要代码 复制代码 代码如下: var startTime = new Date(); //获得当前的时间 startTime.setFullYear(2016, 5, 27); //调用设置年份 startTime.setHou

  • jQuery实现倒计时按钮功能代码分享

    代码一: { wait:90, hsTime:function(that){ if (this.wait == 0) { $('#hsbtn').removeAttr("disabled").val('重发短信验证码'); this.wait = 90; } else { var _this = this; $(that).attr("disabled", true).val('在'+_this.wait+'秒后点此重发'); _this.wait--; setTi

  • jQuery基于扩展实现的倒计时效果

    本文实例讲述了jQuery基于扩展实现的倒计时效果.分享给大家供大家参考,具体如下: <div id="fnTimeCountDown" data-end=""> <span class="mini">00</span>分 <span class="sec">00</span>秒 <span class="hm">000</spa

  • jQuery团购倒计时特效实现方法

    本文实例讲述了jQuery团购倒计时特效实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jquery实现手机发送验证码的倒计时代码

    复制代码 代码如下: var wait=60;//时间 function time(o,p) {//o为按钮的对象,p为可选,这里是60秒过后,提示文字的改变 if (wait == 0) { o.removeAttr("disabled"); o.val("点击发送验证码");//改变按钮中value的值 p.html("如果您在1分钟内没有收到验证码,请检查您填写的手机号码是否正确或重新发送"); wait = 60; } else { o.

随机推荐