用圆形进度条倒计时器

我创build了一个倒数计时器。 我有一个被制成圆形的边框。 由于计时器趋向于零,圆形边框应该在秒内减less颜色。

我创build了JSFIDDLE

HTML

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

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

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

以下是倒数计时器的示例片段,其中有一个圆形的进度条,当该值下降时,该进度条会改变颜色。

基本上我们正在做的是如下:(参考代码中的内联注释了解更多细节)

  • 4个额外的div绝对位于父级之上。 每个代表一个象限。
  • 最初所有的倾斜angular都是0度,所以它们都是完全可见的,覆盖了整个家长。 这隐藏了父项的box-shadow ,使其看起来像一个实心的圆圈。
  • 在每次迭代中,我们修改每个象限( div )的倾斜angular度,使得象限最终变得不可见,从而揭示父代box-shadow
  • 当斜交angular度达到+/- 90度时,象限变得不可见,所以在每次迭代中,angular度被计算为(该象限中所覆盖的步数的 90度/号)
  • 随着进度移过一个象限到另一个象限,父母的box-shadow被改变,以使进度条的外观改变其颜色。
  • 原始的CodePen直接使用data-progress属性的值作为伪元素的content 。 但是每次迭代都会增加这个值。 由于它也用于计算倾斜angular度,所以我将它保留原样,并使用一个单独的字段作为倒数计时器。 伪元素的内容不能使用JS来设置,所以我为计时器文本添加了另一个div
 window.onload = function() { var progressbar = document.querySelector('div[data-progress]'), quad1 = document.querySelector('.quad1'), quad2 = document.querySelector('.quad2'), quad3 = document.querySelector('.quad3'), quad4 = document.querySelector('.quad4'), counter = document.querySelector('.counter'); var progInc = setInterval(incrementProg, 1000); // call function every second function incrementProg() { progress = progressbar.getAttribute('data-progress'); //get current value progress++; // increment the progress bar value by 1 with every iteration progressbar.setAttribute('data-progress', progress); //set value to attribute counter.textContent = 100 - parseInt(progress, 10); // set countdown timer's value setPie(progress); // call the paint progress bar function based on progress value if (progress == 100) { clearInterval(progInc); // clear timer when countdown is complete } } function setPie(progress) { /* If progress is less than 25, modify skew angle the first quadrant */ if (progress <= 25) { quad1.setAttribute('style', 'transform: skew(' + progress * (-90 / 25) + 'deg)'); } /* Between 25-50, hide 1st quadrant + modify skew angle of 2nd quadrant */ else if (progress > 25 && progress <= 50) { quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely quad2.setAttribute('style', 'transform: skewY(' + (progress - 25) * (90 / 25) + 'deg)'); progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 20px orange'); } /* Between 50-75, hide first 2 quadrants + modify skew angle of 3rd quadrant */ else if (progress > 50 && progress <= 75) { quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely quad2.setAttribute('style', 'transform: skewY(90deg)'); // hides 2nd completely quad3.setAttribute('style', 'transform: skew(' + (progress - 50) * (-90 / 25) + 'deg)'); progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 20px yellow'); } /* Similar to above for value between 75-100 */ else if (progress > 75 && progress <= 100) { quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely quad2.setAttribute('style', 'transform: skewY(90deg)'); // hides 2nd completely quad3.setAttribute('style', 'transform: skew(-90deg)'); // hides 3rd completely quad4.setAttribute('style', 'transform: skewY(' + (progress - 75) * (90 / 25) + 'deg)'); progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 20px green'); } } } 
 div[data-progress] { box-sizing: border-box; position: relative; height: 200px; width: 200px; background: beige; border-radius: 50%; box-shadow: inset 0px 0px 0px 20px red; transition: all 1s; overflow: hidden; } .counter { position: absolute; height: 100%; width: 100%; top: 0%; left: 0%; text-align: center; line-height: 200px; border-radius: 50%; background: transparent; z-index: 4; } div > div { position: absolute; height: 50%; width: 50%; background: inherit; border-radius: 0%; } .quad1, .quad2 { left: 50%; transform-origin: left bottom; } .quad3, .quad4 { left: 0%; transform-origin: right top; } .quad1, .quad4 { top: 0%; } .quad2, .quad3 { top: 50%; } .quad1, .quad3 { transform: skew(0deg); /* invisible at -90deg */ } .quad2, .quad4 { transform: skewY(0deg); /* invisible at 90deg */ } /* Just for demo */ body { background: linear-gradient(90deg, crimson, indianred, purple); } div[data-progress] { margin: 40px auto; } 
 <script src="ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div data-progress="0"> <div class="quad1"></div> <div class="quad2"></div> <div class="quad3"></div> <div class="quad4"></div> <div class='counter'>100</div> </div>