带有圆形进度条的倒数计时器

IT技术 javascript jquery css css-shapes
2021-03-04 21:33:33

我创建了一个倒数计时器。我有一个圆形的边框。当计时器趋向于零时，圆形边框应随着秒数递减而改变颜色。

我创建了 JSFIDDLE

HTML

<div class="outer">
    <button class="btn btn-default btn-timer">0.00</button>
</div>

代码

var displayminutes;
var displayseconds;
var initializeTimer = 1.5 // enter in minutes
var minutesToSeconds = initializeTimer*60;

$("#document").ready(function(){
    setTime = getTime();
    $(".btn-timer").html(setTime[0]+":"+setTime[1])
});


$(".btn-timer").click(function(){
    var startCountDownTimer = setInterval(function(){
          minutesToSeconds = minutesToSeconds-1;
        var timer = getTime();
         $(".btn-timer").html(timer[0]+":"+timer[1]);
        if(minutesToSeconds == 0){
            clearInterval(startCountDownTimer);
            console.log("completed");
        }
      },1000)
});


function getTime(){

    displayminutes = Math.floor(minutesToSeconds/60);
    displayseconds = minutesToSeconds - (displayminutes*60);
    if(displayseconds < 10)
    {   
        displayseconds ="0"+displayseconds;
    }
     if(displayminutes < 10)
    {   
        displayminutes = "0"+displayminutes;
    }

    return [displayminutes, displayseconds];
}

如何获得圆形进度条。我寻找了一些 jQuery 插件，但它们不符合我的要求。我正在寻找类似于此链接的输出

1个回答

下面是倒数计时器的示例片段，带有一个圆形进度条，随着值的下降而改变颜色。

基本上我们正在做的事情如下：（更多细节请参考代码中的内联注释）

  • 另外 4 个div绝对位于父级之上。每个代表一个象限。
  • 最初，它们的倾斜角度都是 0 度，因此它们都完全可见并覆盖整个父级。这隐藏了box-shadow父对象的 ，从而使它看起来像一个实心圆。
  • 在每次迭代中，我们修改每个象限 ( div)的倾斜角度，使得这些象限最终一个一个地变得不可见，从而显示出box-shadow父项的 。
  • 当倾斜角度达到 +/- 90 度时，象限变得不可见，因此在每次迭代时，角度计算为（ 90 度/该象限中覆盖的步数）。
  • 当进度从一个象限移到另一个象限时，box-shadow父项的 会发生变化，使进度条的外观改变其颜色。
  • 原始 CodePendata-progress直接使用属性的值作为content伪元素的 。但是该值会随着每次迭代而增加。由于它也用于计算倾斜角度，因此我将其保留原样并为倒数计时器使用了一个单独的字段。伪元素的内容无法使用 JS 设置，因此我div为计时器文本添加了另一个。

显示代码片段

在下面的代码片段中，我background为每个象限添加了不同的内容，以更好地直观说明究竟发生了什么。

显示代码片段

@AlexanderSolonik：这是为了确保背景不会比实际答案更受关注：P（我不擅长选择颜色）。
2021-05-11 21:33:33
！很棒的渐变，绝对喜欢它，你从哪里得到这些 coller 托盘lol。
2021-05-12 21:33:33
我正在根据客户的建议与 svg 合作。但你的意见是最有value的。我需要经常旅行。
2021-05-16 21:33:33
其它你可能感兴趣的问题
上一篇我可以在不注销的情况下获得更新的 emailVerified 吗？ 下一篇对值求和时返回 NaN 的对象