温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Countdown-倒计时插件

发布时间:2020-06-24 16:31:21 来源:网络 阅读:400 作者:renyiqiu 栏目:web开发

今天我介绍的就是类似这种功能的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');
              }
          });
      });




向AI问一下细节
推荐阅读:
  1. Android倒计时
  2. JS倒计时

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI