圆形进度栏周围的计时器会随着时间的流逝而变化

Question

这是我代码

的链接

我想知道我是否有一种方法可以沿计时器的圆周构建圆形进度栏，随着时间的推移会改变颜色吗？

p。S.我只想使用HTML，CSS和JavaScript

 <div id="quiz"><br>
      <div class="progress">
       <div class="progress-value">
        <span id="time">05:00 </span>
       </div>
      </div>
    </div>

fyr：这是我试图实现的目标

Answer 1

您可以使用HTML画布尝试这样的东西，并绘制弧：

<canvas id="progress-bar"></canvas>
<script>
    var canvas = document.getElementById('progress-bar');
    if(canvas){
        var context = canvas.getContext('2d'),
            centerX = canvas.width / 2,
            centerY = canvas.height / 2,
            radius = 50;
        // completedPercentage would be dynamically set 
        // from 0 to 1 based on what % of time had elapsed.
        // I've hardcoded it to 40% here to demo the circle.
        var completedPercentage = 0.40;
        var startAngle = 1.5 * Math.PI,
            endAngle = -.5 * Math.PI + (completedPercentage * Math.PI * 2);
        context.lineWidth = 10;
        context.beginPath();
        context.arc(centerX, centerY, radius, startAngle, endAngle);
        context.strokeStyle = '#060';
        context.stroke();
        context.beginPath();
        context.arc(centerX, centerY, radius, endAngle, -.5 * Math.PI);
        context.strokeStyle = '#0F0';
        context.stroke();
    }
</script>

您可以将画布定位在#Time元素后面，然后更新该值还会触发对此JavaScript的调用，以更新"完整的PersedPercentage"值。我将大多数值设置为命名的大多数变量，以便您可以看到要交换，交换并进行调整以使圆的大小/形状/颜色所需的大小/形状/颜色进行调整。

涉及Pi的数学一点点是为了使弧线从顶部开始。通常是Math.pi的圆圈将从右侧开始（0），因此将其调整为3/4的旋转，因此它从我们倾向于在圆圈方面想到的" 12点"位置开始和时间。