如何实现随JS计时状态变化的CSS红白色环形进度边框

解决方案概述 #

用CSS锥形渐变（conic-gradient）配合外层容器实现动态环形边框，通过JavaScript控制CSS变量调整红色区域占比，替代原纯色边框方案，完全匹配需求效果。

1. 修改HTML结构 #

给原计时器添加外层容器，承载环形渐变背景：

<div class="countdown-timer-wrapper" style="--progress: ${x}%">
  <div class="countdown-timer">
    <span>{remainingTime.hours}</span>
    <span>:</span>
    <span>{remainingTime.minutes}</span>
    <span>:</span>
    <span>{remainingTime.seconds}</span>
  </div>
</div>

其中--progress是CSS自定义变量，用来接收JavaScript计算出的进度百分比x%。

2. 编写对应CSS #

外层容器负责渲染环形渐变，内层计时器通过白色背景遮挡中间区域，只露出外层环形边框：

.countdown-timer-wrapper {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  padding: 6px; /* 对应原需求的边框宽度 */
  background: conic-gradient(red 0 var(--progress), white var(--progress) 100%);
  margin: 10px auto 0;
}

.countdown-timer {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff; /* 遮挡中间区域，只留外层环形 */
  font-family: "DM Sans";
  font-size: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
}

3. JavaScript动态控制进度 #

在计时器逻辑中，计算当前红色区域占比x%（例如x = (总时长 - 剩余时长)/总时长 * 100），再赋值给CSS变量：

// 假设x是已计算好的百分比（范围0-100）
const timerWrapper = document.querySelector('.countdown-timer-wrapper');
timerWrapper.style.setProperty('--progress', `${x}%`);

如果是React等框架，直接通过style属性绑定即可：

<div 
  className="countdown-timer-wrapper" 
  style={{ '--progress': `${x}%` }}
>
  {/* 内层计时器组件 */}
</div>

方案优势 #

• 无需复杂DOM嵌套，仅通过一个外层容器实现效果
• CSS变量直接关联JS状态，更新逻辑简洁
• 完全符合「初始白色、随时间逐渐变红、时间耗尽全红」的需求

内容的提问来源于stack exchange，提问作者methelyne3130