带圆形进度条的倒计时器

本文介绍了带圆形进度条的倒计时器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 限时删除！！ 我创建了倒计时计时器。我有一个圆形的边框。由于计时器趋向于零，圆形边框应该以秒为单位随着减小而改变颜色。 我创建了JSFIDDLE HTML < div class =outer> < button class =btn btn-default btn-timer> 0.00< / button> < / div> JS CODE var displayminutes; var displayseconds; var initializeTimer = 1.5 //以分钟为单位输入 var minutesToSeconds = initializeTimer * 60; $（＃document）。ready（function（）{ setTime = getTime（）; $（。btn-timer）。html（setTime [ 0] +：+ setTime [1]）$ ​​b $ b}）; $（。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 { displayminutes =0+ displayminutes; } return [displayminutes，displayseconds]; } 如何获取循环进度条。我寻找一些jQuery插件，但他们不符合我的要求。我正在寻找类似的输出此链接 解决方案下面是一个倒计时定时器的示例代码片段，其圆形进度条随着值的变化而改变颜色。 基本上我们所做的是以下几点：（代码中的内联注释更多细节） 4个额外 div 绝对位于父级之上。 最初，所有的倾斜角均为0度，因此它们都是完全可见的，并覆盖整个父代。这隐藏了父项的 box-shadow ，因此它看起来像一个实心圆。 在每次迭代时，我们修改每个象限的倾斜角度（ div ），使得象限最终逐个不可见，从而显示 box-shadow 的父。 当倾斜角达到+/- 90度时，象限变为不可见，因此在每次迭代时，角度计算为（90象限/ 。 当进度移过一个象限到另一个象限时，父项的 box-shadow 原始的CodePen使用 data-progress 属性的值直接作为 content 。但是该值随着每次迭代而增加。由于它也用于计算偏斜角，我已经离开它，并使用一个单独的字段为倒计时定时器。伪元素的内容不能使用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（'。计数器'）; var progInc = setInterval（incrementProg，1000）; //调用函数每秒函数incrementProg（）{progress = progressbar.getAttribute（'data-progress'）; //获取当前值进度++; //每次迭代将进度条的值增加1 progressbar.setAttribute（'data-progress'，progress）; //将值设置为属性counter.textContent = 100 - parseInt（progress，10）; // set countdown timer's value setPie（progress）; //调用paint进度条函数基于进度值if（progress == 100）{clearInterval（progInc）; //如果进度小于25，修改第一个象限的倾斜角* / if（progress< = 25）{quad1.setAttribute（'style' 'transform：skew（'+ progress *（-90 / 25）+'deg）'）; } / *在25-50之间，隐藏第一象限+修改第二象限的倾斜角* / else if（progress> 25&& progress< = 50）{quad1.setAttribute（'style'，'transform：skew （-90deg）'）; //隐藏第一个完全quad2.setAttribute（'style'，'transform：skewY（'+（progress - 25）*（90/25）+'deg）'）; progressbar.setAttribute（'style'，'box-shadow：inset 0px 0px 0px 20px orange'）; } / *在50-75之间，隐藏前两个象限+修改第三象限的偏斜角* / else if（progress> 50&& progress div [data-progress] {box-大小：border-box;位置：相对; height：200px; width：200px;背景：米色; border-radius：50％; box-shadow：inset 0px 0px 0px 20px red; transition：all 1s; overflow：hidden;}。counter {position：absolute;高度：100％;宽度：100％; top：0％; left：0％; text-align：center; line-height：200px; border-radius：50％;背景：透明; z-index：4;} div> div {position：absolute;身高：50％ width：50％;背景：inherit; border-radius：0％;}。quad1，.quad2 {left：50％; transform-origin：left bottom;}。quad3，.quad4 {left：0％;变换原点：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 * /} / *只是为演示* / body {background：linear-gradient（90deg，crimson，indianred，purple）;} div [data-progress] {margin：40px auto;} < script src =https://cdnjs.cloudflare.com/ 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> 在下面的代码段中，我为每个象限添加了不同的背景插图的什么正是发生。 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）; //调用函数每秒函数incrementProg（）{progress = progressbar.getAttribute（'data-progress'）; //获取当前值进度++; //每次迭代将进度条的值增加1 progressbar.setAttribute（'data-progress'，progress）; //将值设置为属性counter.textContent = 100 - parseInt（progress，10）; // set countdown timer's value setPie（progress）; //调用paint进度条函数基于进度值if（progress == 100）{clearInterval（progInc）; //如果进度小于25，则修改第一个象限的倾斜角* / if（progress< = 25）{quad1.setAttribute（'style' 'transform：skew（'+ progress *（-90 / 25）+'deg）'）; } / *在25-50之间，隐藏第一象限+修改第二象限的倾斜角* / else if（progress> 25&& progress< = 50）{quad1.setAttribute（'style'，'transform：skew （-90deg）'）; //隐藏第一个完全quad2.setAttribute（'style'，'transform：skewY（'+（progress - 25）*（90/25）+'deg）'）; progressbar.setAttribute（'style'，'box-shadow：inset 0px 0px 0px 20px orange'）; } / *在50-75之间，隐藏前两个象限+修改第三象限的偏斜角* / else if（progress> 50&& progress div [data-progress] {box-大小：border-box;位置：相对; height：200px; width：200px;背景：米色; border-radius：50％; box-shadow：inset 0px 0px 0px 20px red; transition：all 1s; overflow：hidden;}。counter {position：absolute;高度：100％;宽度：100％; top：0％; left：0％; text-align：center; line-height：200px; border-radius：50％;背景：透明; z-index：4;} div> div {position：absolute;身高：50％ width：50％; border-radius：0％;}。quad1，.quad2 {left：50％; transform-origin：left bottom;}。quad3，.quad4 {left：0％;变换原点：right top;}。quad1，.quad4 {top：0％;}。quad2，.quad3 {top：50％;}。quad1，.quad3 {transform：skew（0deg）;}。 quad4 {transform：skewY（0deg）;} / *只是为demo * / body {background：linear-gradient（90deg，crimson，indianred，purple）;} div [data-progress] {margin：40px auto;}。 {background：blue;}。quad2 {background：pink;}。quad3 {background：tan;}。quad4 {background：teal;} < script src =https://cdnjs.cloudflare.com/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> I created an countdown timer. I got a border which is made circular. As the timer is tending towards zero, the circular border should change color with decrement in the seconds.I created the JSFIDDLEHTML<div class="outer"> <button class="btn btn-default btn-timer">0.00</button></div>JS CODEvar displayminutes;var displayseconds;var initializeTimer = 1.5 // enter in minutesvar 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];}How do I a get a circular progress bar. I looked for some jQuery plugin but they are not matching my requirement. I am looking for an output similar to this link 解决方案 Below is a sample snippet for the countdown timer with a circular progress bar that changes color as the value comes down.Basically what we are doing is the follows: (refer inline comments in code for more details)4 additional div are absolutely positioned on top of the parent. Each represents a quadrant.Initially the skew angle on all of them is 0 degree, so they are all fully visible and cover the entire parent. This hides the box-shadow of the parent and thus makes it look like a solid circle.At every iteration, we modify the skew angle of each quadrant (div) such that the quadrants eventually become invisible one by one and thus revealing the box-shadow of parent.The quadrants become invisible when the skew angle reaches +/- 90 degrees and so at each iteration the angle is calculated as (90deg / no. of steps covered in that quadrant).As the progress moves past one quadrant to another, the box-shadow of the parent is changed to give the appearance of the progress bar changing its color.The original CodePen uses the data-progress attribute's value directly as the content of a pseudo-element. But that value gets incremented with every iteration. Since it is also used in calculation of the skew angles, I have left it as-is and used a separate field for the countdown timer. Content of pseudo-elements cannot be set using JS and so I have added another div for the timer text.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="https://cdnjs.cloudflare.com/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>In the below snippet, I have added a different background for each quadrant to provide a better visual illustration of what exactly is happening.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%; 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);}.quad2, .quad4{ transform: skewY(0deg);}/* Just for demo */body { background: linear-gradient(90deg, crimson, indianred, purple);}div[data-progress] { margin: 40px auto;}.quad1 { background: blue;}.quad2 { background: pink;}.quad3 { background: tan;}.quad4 { background: teal;}<script src="https://cdnjs.cloudflare.com/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> 这篇关于带圆形进度条的倒计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..