HTML, CSS 和 JavaScript 实现百分百完成圆形进度条

以下是一个生成百分百完成圆形进度条的 HTML、CSS 和 JS 代码示例：

HTML 代码：

<div class='circle-container'>
  <div class='circle'>
    <div class='mask full'>
      <div class='fill'></div>
    </div>
    <div class='mask half'>
      <div class='fill'></div>
      <div class='fill fix'></div>
    </div>
    <div class='percent'>
      <div class='number'>100%</div>
    </div>
  </div>
</div>

CSS 代码：

.circle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip: rect(0, 200px, 200px, 100px);
}

.full {
  clip: rect(0, 100px, 200px, 0);
}

.fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #00bfff;
  transform-origin: center center;
}

.half {
  clip: rect(0, 200px, 200px, 100px);
}

.fix {
  transform: rotate(180deg);
}

.percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.number {
  display: inline-block;
  vertical-align: middle;
  font-size: 48px;
  font-weight: bold;
  color: #00bfff;
}

JS 代码：

const circle = document.querySelector('.circle');
const fill = document.querySelector('.fill');
const number = document.querySelector('.number');

const radius = circle.clientWidth / 2;
const circumference = 2 * Math.PI * radius;

fill.style.strokeDasharray = circumference;
fill.style.strokeDashoffset = 0;

number.innerHTML = '100%';

这个代码生成了一个宽高都为 200px 的圆形，用蓝色填充了整个圆形，并且在圆形中心显示了 '100%' 字样。其中，使用了 CSS 的 clip 属性实现了遮罩效果，使用了 JS 计算圆形周长和填充百分比的动态变化。