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: this is something on the lines of what I am trying to achieve

Answer 1

你可以尝试使用HTML Canvas并画一个弧：

<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>

您可以将Canvas放在#time元素后面，然后更新该值也会触发对此JavaScript的调用，更新'completedPercentage'值。我已将大多数值设置为命名良好的变量，以便您能够查看要交换的内容，换出并调整以获得所需的大小/形状/颜色。

涉及PI的一点点数学运算只是让弧从顶部开始。通常Math.PI将从右侧（0）开始你的圆圈，所以这将它调整为旋转的3/4，以便它从我们倾向于考虑圆圈的“12点”位置开始和时间。

计时器周围的循环进度条，随着时间的推移改变颜色

1 个答案: