Изменить значение в течение установленного времени с помощью jQuery?

Question

Я работаю над проектом, который требует круговой индикатор выполнения. Я нашел, что будет делать трюк здесь:

http://codepen.io/shankarcabus/pen/GzAfb

Но что мне нужно сделать, это оживить его при загрузке страницы, так что он будет идти в значение каждый раз, когда:

<div class="progress-pie-chart" data-percent="43"> 

Так на странице «page1.htm», мне нужно, чтобы значение процента данных автоматически увеличивалось постепенно от 0-20. На «page2.htm» от 20-33 и т. Д. Я довольно новичок в jQuery, поэтому я честно понятия не имею, с чего начать.

Как создать функцию, которая увеличит значение процента данных, скажем, 500 миллисекунд?

Answer 1

Используя setInterval, мы можем изготовить что-то вроде. Мы также используем математику для вычисления шагов, основанных на fps, для создания плавной анимации. Десятичные также могут быть использованы для процента

var start = 0; 
 
var end = 30; 
 
var time = 800; //in ms 
 
var fps = 30; 
 

 
var increment = ((end-start)/time)*fps; 
 

 
$('.progress-pie-chart')[0].dataset.percent = start; 
 

 
var timer = setInterval(function() { 
 
    $('.progress-pie-chart')[0].dataset.percent = parseFloat($('.progress-pie-chart')[0].dataset.percent) + increment; 
 

 
    if (parseFloat($('.progress-pie-chart')[0].dataset.percent) >= end) { 
 
    clearInterval(timer); 
 
    } 
 

 
    var $ppc = $('.progress-pie-chart'), 
 
    percent = parseFloat($ppc[0].dataset.percent), 
 
    deg = 360 * percent/100; 
 

 
    if (percent > 50) { 
 
    $ppc.addClass('gt-50'); 
 
    } 
 
    $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)'); 
 
    $('.ppc-percents span').html(parseInt(percent, 10) + '%'); 
 
}, fps);

.progress-pie-chart { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    background-color: #E5E5E5; 
 
    position: relative; 
 
} 
 
.progress-pie-chart.gt-50 { 
 
    background-color: #81CE97; 
 
} 
 
.ppc-progress { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    left: calc(50% - 100px); 
 
    top: calc(50% - 100px); 
 
    width: 200px; 
 
    height: 200px; 
 
    clip: rect(0, 200px, 200px, 100px); 
 
} 
 
.ppc-progress .ppc-progress-fill { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    left: calc(50% - 100px); 
 
    top: calc(50% - 100px); 
 
    width: 200px; 
 
    height: 200px; 
 
    clip: rect(0, 100px, 200px, 0); 
 
    background: #81CE97; 
 
    transform: rotate(60deg); 
 
} 
 
.gt-50 .ppc-progress { 
 
    clip: rect(0, 100px, 200px, 0); 
 
} 
 
.gt-50 .ppc-progress .ppc-progress-fill { 
 
    clip: rect(0, 200px, 200px, 100px); 
 
    background: #E5E5E5; 
 
} 
 
.ppc-percents { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    left: calc(50% - 173.91304px/2); 
 
    top: calc(50% - 173.91304px/2); 
 
    width: 173.91304px; 
 
    height: 173.91304px; 
 
    background: #fff; 
 
    text-align: center; 
 
    display: table; 
 
} 
 
.ppc-percents span { 
 
    display: block; 
 
    font-size: 2.6em; 
 
    font-weight: bold; 
 
    color: #81CE97; 
 
} 
 
.pcc-percents-wrapper { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
body { 
 
    font-family: Arial; 
 
    background: #f7f7f7; 
 
} 
 
.progress-pie-chart { 
 
    margin: 50px auto 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="progress-pie-chart" data-percent="0"> 
 
    <div class="ppc-progress"> 
 
    <div class="ppc-progress-fill"></div> 
 
    </div> 
 
    <div class="ppc-percents"> 
 
    <div class="pcc-percents-wrapper"> 
 
     <span>%</span> 
 
    </div> 
 
    </div> 
 
</div>