Javascript 计时器周围的圆形进度条，随着时间的推移而改变颜色

我想知道是否有一种方法可以让我的电脑沿着计时器的圆周构建一个圆形进度条，它会随着时间的推移而改变颜色

另外，我只想使用HTML、CSS和JavaScript

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

05:00 

---

您可以使用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>

var canvas=document.getElementById（'progress-bar'）；
如果（画布）{
var context=canvas.getContext（'2d'），
centerX=canvas.width/2，
centerY=canvas.height/2，
半径=50；
//completedPercentage将动态设置
//根据所用时间的百分比从0到1。
//我已经将其硬编码为40%，在这里演示循环。
var completedPercentage=0.40；
var startAngle=1.5*Math.PI，
endAngle=-.5*Math.PI+（完成百分比*Math.PI*2）；
context.lineWidth=10；
context.beginPath（）；
弧（中心X、中心Y、半径、星形、端角）；
context.strokeStyle='#060'；
stroke（）；
context.beginPath（）；
弧（中心x，中心y，半径，端角，-.5*Math.PI）；
context.strokeStyle='#0F0'；
stroke（）；
}

您可以将画布放置在#time元素后面，然后在更新该值时也会触发对该JavaScript的调用，以更新“completedPercentage”值。我已经将大多数值设置为命名良好的变量，这样您就可以看到要交换、交换和调整的内容，以获得所需的大小/形状/颜色

关于圆周率的一点数学只是让弧从顶部开始。通常，Math.PI会让圆从右侧（0）开始，因此这会将其调整为旋转的3/4，以便它从“12点钟”位置开始，这是我们通常想到的关于圆和时间的位置