带圆形进度条的倒计时器 [英] Count down timer with circular progress bar

查看：132 发布时间：2017/1/18 12:49:23 javascript jquery css css3 css-shapes

本文介绍了带圆形进度条的倒计时器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了倒计时计时器。我有一个圆形的边框。由于计时器趋向于零，圆形边框应该以秒为单位随着减小而改变颜色。

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 <10）
 {
 displayminutes =0+ displayminutes; 
} 
 
 return [displayminutes，displayseconds]; 
}

如何获取循环进度条。我寻找一些jQuery插件，但他们不符合我的要求。我正在寻找类似的输出此链接< a>

解决方案

下面是一个倒计时定时器的示例代码片段，其圆形进度条随着值的变化而改变颜色。

基本上我们所做的是以下几点：（代码中的内联注释更多细节）

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 <= 75）{quad1.setAttribute（'style'偏斜（-90度）'）; // hides 1st completely quad2.setAttribute（'style'，'transform：skewY（90deg）'）; //隐藏第二完全quad3.setAttribute（'style'，'transform：skew（'+（progress  -  50）*（-90 / 25）+'deg）'）; progressbar.setAttribute（'style'，'box-shadow：inset 0px 0px 0px 20px yellow'）; } / *类似于上面的值在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）'）; //隐藏第三完全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-大小：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 <= 75）{quad1.setAttribute（'style'偏斜（-90度）'）; // hides 1st completely quad2.setAttribute（'style'，'transform：skewY（90deg）'）; //隐藏第二完全quad3.setAttribute（'style'，'transform：skew（'+（progress  -  50）*（-90 / 25）+'deg）'）; progressbar.setAttribute（'style'，'box-shadow：inset 0px 0px 0px 20px yellow'）; } / *类似于上面的值在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）'）; //隐藏第三完全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-大小：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 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 // 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];
}

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>

这篇关于带圆形进度条的倒计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

带圆形进度条的倒计时器 [英] Count down timer with circular progress bar

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

带圆形进度条的倒计时器 [英] Count down timer with circular progress bar

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭