Javascript 带有循环进度条的倒计时计时器

我创建了一个倒计时计时器。我有一个圆形的边界。当计时器趋于零时，圆形边框的颜色应在几秒钟内逐渐变小

HTML

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

0

JS代码

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];
}

var显示分钟；
var显示秒；
var initializetime=1.5//以分钟为单位输入
var minutesToSeconds=初始化器*60；
$（“#文档”）.ready（函数（）{
setTime=getTime（）；
$（“.btn timer”）.html（设置时间[0]+”：“+设置时间[1]）
});
$（“.btn timer”）。单击（函数（）{
var startCountDownTimer=setInterval（函数（）{
minutesToSeconds=minutesToSeconds-1；
var timer=getTime（）；
$（“.btn timer”）.html（计时器[0]+”：“+计时器[1]）；
如果（分钟秒==0）{
clearInterval（开始计数计时器）；
控制台日志（“已完成”）；
}
},1000)
});
函数getTime（）{
显示分钟数=数学楼层（分钟秒/60）；
displayseconds=分钟秒-（displayminutes*60）；
如果（显示秒数<10）
{   
displayseconds=“0”+displayseconds；
}
如果（显示分钟数<10）
{   
displayminutes=“0”+displayminutes；
}
返回[displayminutes，displayseconds]；
}

---

如何获得循环进度条。我找了一些jQuery插件，但它们不符合我的要求。我正在寻找一个类似的输出，下面是一个倒计时计时器的示例片段，它带有一个圆形进度条，随着值的下降而改变颜色

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

• 4额外的

  div

  绝对位于父级的顶部。每个代表一个象限
• 最初，它们的倾斜角度都为0度，因此它们都完全可见并覆盖整个父对象。这将隐藏父对象的

  框阴影

  ，从而使其看起来像一个实心圆
• 在每次迭代中，我们修改每个象限（

  div

  ）的倾斜角度，使象限最终一个接一个地变为不可见，从而显示父象限的

  框阴影
  当倾斜角度达到+/-90度时，象限变得不可见，因此在每次迭代时，角度计算为（该象限中涵盖的90度/步数）
  当进度从一个象限移动到另一个象限时，父象限的
  框阴影将更改，以使进度条的外观改变其颜色
  
  原始代码笔使用
  数据进度
  属性的值直接作为伪元素的
  内容
  。但该值会随着每次迭代而增加。由于它也用于计算倾斜角度，所以我将其保持原样，并使用一个单独的字段作为倒计时计时器。伪元素的内容不能使用JS设置，因此我为计时器文本添加了另一个
  div
  

window.onload=function（）{
var progressbar=document.querySelector（'div[数据进度]），
quad1=document.querySelector（'.quad1'），
quad2=document.querySelector（'.quad2'），
quad3=document.querySelector（'.quad3'），
quad4=document.querySelector（'.quad4'），
计数器=document.querySelector（'.counter'）；
var progInc=setInterval（incrementProg，1000）；//每秒调用一次函数
函数incrementProg（）{
progress=progressbar.getAttribute（'data-progress'）；//获取当前值
progress++；//每次迭代都将进度条值增加1
progressbar.setAttribute（'data-progress'，progress）；//将值设置为属性
counter.textContent=100-parseInt（进度，10）；//设置倒计时计时器的值
setPie（进度）；//根据进度值调用绘制进度条函数
如果（进度==100）{
clearInterval（progInc）；//倒计时完成时清除计时器
}
}
函数setPie（进度）{
/*如果进度小于25，请修改第一个象限的倾斜角度*/
如果（进度25和进度50和进度75和进度div）{
位置：绝对位置；
身高：50%；
宽度：50%；
背景：继承；
边界半径：0%；
}
.1，
.2{
左：50%；
变换原点：左下角；
}
.3，
.4{
左：0%；
变换原点：右上角；
}
.1，
.4{
最高：0%；
}
.2，
.3{
最高：50%；
}
.1，
.3{
变换：倾斜（0度）；/*在-90度不可见*/
}
.2，
.4{
变换：倾斜（0度）；/*在90度时不可见*/
}
/*只是为了演示*/
身体{
背景：线性梯度（90度，深红色，印度红，紫色）；
}
分区〔数据进度〕{
利润率：40px自动；
}

100

我以前创建过。它看起来像你需要的吗？外部的实体边框可以删除。你也可以看看。建议的两个链接的问题是，它们看起来不像你链接中的颜色填充了现有的灰色区域。我最好还是用你的代码笔。我无法识别中间的part代码。你的代码的哪一行在圆圈中显示1-100。对不起。本周休息很长时间。我今天会计算出来，并让你保持联系。！很棒的渐变，绝对喜欢它，你从lol哪里得到这些coller托盘。@AlexanderSolonik:这是为了确保背景不会比实际答案吸引更多的注意力：P（我不擅长选择颜色）。我正在按照客户的建议使用svg。但您的输入是最有价值的。我需要经常出差。