jquery倒计时插件

最新推荐文章于 2024-09-14 15:41:17 发布

地中海_zhi

最新推荐文章于 2024-09-14 15:41:17 发布

阅读量964

点赞数

分类专栏： jquery 文章标签： jquery 前端插件倒计时

本文链接：https://blog.youkuaiyun.com/qq_40683441/article/details/82217337

版权

jquery 专栏收录该内容

3 篇文章

订阅专栏

博客围绕jQuery前端倒计时插件展开，涉及插件的结构以及JS相关内容，为前端开发中使用该插件提供了基础信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结构

<div class="count-down" data-end="2097/11/10">
  <p>90年后倒计时</p>
  <span class="day">0</span> 天 <span class="hour">0</span> 时 <span class="minute">0</span> 分 <span class="sec">0</span> 秒
</div>
<div class="count-down a2" data-end="2018/02/16">
  <p>2018年春节倒计时</p>
  <span class="day">0</span> 天 <span class="hour">0</span> 时 <span class="minute">0</span> 分 <span class="sec">0</span> 秒
</div>

js

  (function ($) {
    $.fn.extend({
      countDown: function (options) {
        var defaults = {
            endTime: '2097/11/10',  //结束时间,90年后
            day: '.day',
            hour: '.hour',
            minute: '.minute',
            sec: '.sec'
          },
          opts = $.extend({}, defaults, options); //对象扩展到opts
        this.each(function () {     //遍历
          var $this = $(this);
          times();    //先执行一次，防止刷新时数字都显示为0
          var timer = setInterval(times, 1000);   //定时器执行

          function times() {
            var nowDate = new Date(),
              endDate = $this.data('end') ? new Date($this.data('end')) : new Date(opts.endTime),// 定义了两种方式，data-end和defaults.endTime,优先data-end
              tms = endDate - nowDate,    //时间差
              days = Math.floor(tms / 1000 / 60 / 60 / 24),
              hours = Math.floor(tms / 1000 / 60 / 60 % 24),
              minutes = Math.floor(tms / 1000 / 60 % 60),
              secs = Math.floor(tms / 1000 % 60);
            if (tms > 0) {  //如果时间差大于0，显示倒计时
              $this.find(opts.day).text(addZero(days));
              $this.find(opts.hour).text(addZero(hours));
              $this.find(opts.minute).text(addZero(minutes));
              $this.find(opts.sec).text(addZero(secs));
            } else {    //否则清除定时器，倒计时结束
              clearInterval(timer);
            }
          }
        });


        function addZero(t) {  //一位数加0
          if (t < 10) {
            return t = '0' + t;
          } else {
            return t;
          }
        }
        return this; //返回this方便链式调用
      }
    });
    $('.count-down').countDown(); //默认调用方法
    $('.a2').countDown();
  })(jQuery)