利用jQuery实现漂亮的圆形进度条倒计时插件

来一份详细的攻略。

标题

利用 jQuery 实现漂亮的圆形进度条倒计时插件

插件需求

能够支持自定义倒计时时长
能够在倒计时过程中实时更新进度条
能够在倒计时结束时触发回调事件

插件设计思路

插件设计基于 SVG 实现，SVG 是用于描述二维矢量图形的 XML 格式，提供了完整的图形描述能力，包括形状、路径、文字、图像等元素。

插件 HTML 结构

插件的 HTML 结构包含两个部分：倒计时圆环和倒计时文本。

<div class="countdown-wrapper">
  <svg class="countdown-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <g>
      <circle class="countdown-progress" cx="100" cy="100" r="90" />
      <circle class="countdown-remaining" cx="100" cy="100" r="90" />
    </g>
  </svg>
  <div class="countdown-text">30:00</div>
</div>

其中 countdown-svg 是 SVG 元素，countdown-progress 表示圆形进度条的已完成部分，countdown-remaining 表示圆形进度条的未完成部分，countdown-text 表示倒计时文本。

插件 CSS 样式

在 CSS 样式中，设置圆形进度条的颜色、宽度、文本对齐等样式。

.countdown-wrapper {
  position: relative;
  display: inline-block;
}

.countdown-svg {
  display: block;
  margin: auto;
}

.countdown-progress {
  fill: none;
  stroke: #e74c3c;
  stroke-width: 15;
  stroke-linecap: round;
}

.countdown-remaining {
  fill: none;
  stroke: #eee;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-dasharray: 565.5;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.5s ease-in-out;
}

.countdown-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}

其中，.countdown-progress 和 .countdown-remaining 中的 stroke 属性表示圆形进度条的颜色，stroke-width 表示圆形进度条的宽度，stroke-linecap 表示圆形进度条两端的形状，stroke-dasharray 表示圆形进度条的总长度，stroke-dashoffset 表示圆形进度条未完成部分的长度，transform 表示圆形进度条逆时针旋转 90 度，transform-origin 表示圆形进度条的旋转点位置。.countdown-text 表示倒计时文本的样式。

插件 JavaScript 代码

插件的 JavaScript 代码主要分为两个部分：初始化和倒计时。

初始化

当插件被加载时，需要进行初始化设置，包括：

获取插件容器；
获取 SVG 元素、圆形进度条元素、倒计时文本元素；
获取倒计时开始时间和结束时间；
计算倒计时时间差；
计算圆形进度条未完成部分的长度；
设置未完成部分的长度为总长度，使圆形进度条隐藏。

(function($) {
  $.fn.countdown = function(options) {
    var settings = $.extend({
      start: 0,
      end: 0,
      callback: function() {},
    }, options);

    return this.each(function() {
      var $wrapper = $(this);
      var $svg = $wrapper.find('.countdown-svg');
      var $progress = $wrapper.find('.countdown-progress');
      var $remaining = $wrapper.find('.countdown-remaining');
      var $text = $wrapper.find('.countdown-text');

      var startTime = settings.start;
      var endTime = settings.end;
      var timeDiff = (endTime - startTime) * 1000;
      var remainingLength = $remaining[0].getTotalLength();

      $remaining[0].style.strokeDashoffset = remainingLength;
      $remaining[0].style.strokeDasharray = remainingLength;
      $remaining.hide();
    });
  };
})(jQuery);

倒计时

在插件初始化完成之后，需要进行倒计时处理，包括：

计算倒计时剩余时间；
转换倒计时剩余时间为分秒格式；
更新圆形进度条未完成部分的长度；
更新倒计时文本；
当倒计时剩余时间小于等于 0 时，触发回调事件。

(function($) {
  $.fn.countdown = function(options) {
    var settings = $.extend({
      start: 0,
      end: 0,
      callback: function() {},
    }, options);

    return this.each(function() {
      var $wrapper = $(this);
      var $svg = $wrapper.find('.countdown-svg');
      var $progress = $wrapper.find('.countdown-progress');
      var $remaining = $wrapper.find('.countdown-remaining');
      var $text = $wrapper.find('.countdown-text');

      var startTime = settings.start;
      var endTime = settings.end;
      var timeDiff = (endTime - startTime) * 1000;
      var remainingLength = $remaining[0].getTotalLength();

      $remaining[0].style.strokeDashoffset = remainingLength;
      $remaining[0].style.strokeDasharray = remainingLength;
      $remaining.hide();

      var countdownInterval = setInterval(function() {
        var remainingTimeDiff = endTime - Math.floor(Date.now() / 1000);

        if (remainingTimeDiff <= 0) {
          clearInterval(countdownInterval);
          settings.callback.call(this);
        } else {
          var minutes = Math.floor(remainingTimeDiff / 60).toString().padStart(2, '0');
          var seconds = Math.floor(remainingTimeDiff % 60).toString().padStart(2, '0');
          var time = minutes + ':' + seconds;

          var progress = (1 - remainingTimeDiff / timeDiff) * 100;
          var dashOffset = remainingLength - progress / 100 * remainingLength;

          $remaining.show();
          $remaining[0].style.strokeDashoffset = dashOffset;
          $text.text(time);
        }
      }, 250);
    });
  };
})(jQuery);

示例

下面提供两个使用示例。

示例一

<div id="countdown"></div>

$('#countdown').countdown({
  start: 0,
  end: 1800,
  callback: function() {
    alert('倒计时结束！');
  },
});

示例二

<div class="countdown-wrapper">
  <svg class="countdown-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <g>
      <circle class="countdown-progress" cx="100" cy="100" r="90" />
      <circle class="countdown-remaining" cx="100" cy="100" r="90" />
    </g>
  </svg>
  <div class="countdown-text"></div>
</div>

$('.countdown-wrapper').countdown({
  start: 0,
  end: 600,
  callback: function() {
    $('.countdown-wrapper').css('border', '5px solid green');
  },
});

以上就是实现一个漂亮的圆形进度条倒计时插件的完整攻略了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用jQuery实现漂亮的圆形进度条倒计时插件 - Python技术站