用圆形进度条倒计时器
我创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>
