为了账号安全,请及时绑定邮箱和手机立即绑定

Countdown-倒计时插件

标签:
JQuery

今天我介绍的就是类似这种功能的jquery插件,他不仅能实现上面所述的功能,而且在每个倒计时数字实现动画的过渡效果。


文章详情和下载链接


$(document).ready(function () {          /* 延迟函数  */          jQuery.fn.delay = function (time, func) {              return this.each(function () {                  setTimeout(func, time);              });          };          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 () {                  if (!to && to != settings.endNumber) { to = settings.startNumber; }                  //设定倒计时开始的号码                  $(this).text(to).css('fontSize', settings.startFontSize);                  //页面动画                  $(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);                      }                  });              });          };          //使用          $('#countdown').countDown({              startNumber: 10,              callBack: function (me) {                  $(me).text('All done! This is where you give the reward!').css('color', '#090');              }          });      });




点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消