给我生成一个百分百的完成圈使用html和js和css

以下是一个生成百分百完成圈的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计算圆形周长和填充百分比的动态变化