HTML、CSS 和 JavaScript 实现动态百分比完成圈

以下是使用 HTML、CSS 和 JavaScript 生成百分比完成圈的示例：

HTML 代码：

<div class='progress-circle'>
  <div class='progress-bar'></div>
  <div class='percent'>0%</div>
</div>

CSS 代码：

.progress-circle {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #eee;
  overflow: hidden;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff6666;
  transform-origin: center;
  transform: rotate(-90deg);
}

.percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
}

JavaScript 代码：

var percent = 0;
var intervalId = setInterval(function() {
  percent++;
  $('.progress-bar').css('transform', 'rotate(' + (percent * 3.6) + 'deg)');
  $('.percent').text(percent + '%');
  if (percent == 100) {
    clearInterval(intervalId);
  }
}, 50);

解释说明：

• HTML 代码定义了一个父容器 (progress-circle)，其中包含两个子元素：进度条 (progress-bar) 和百分比数字 (percent)。
• CSS 代码定义了进度条和百分比数字的样式，以及父容器的圆形形状和背景颜色等。
• JavaScript 代码定义了一个计时器，每 50 毫秒更新一次进度条和百分比数字的显示。进度条的旋转角度通过计算当前百分比得出，每个百分比对应 3.6 度的旋转角度。当百分比达到 100% 时，停止计时器。

运行效果：