Как добавить счетчик на несколько текстов - PullRequest
Новая
       16

Как добавить счетчик на несколько текстов

0 голосов
/ 22 ноября 2018

У меня есть несколько круговых диаграмм с текстом внутри, чтобы показать процент, и я хочу его анимировать.ниже приращения кода, счет до тех пор, пока число не достигнет сотен. 

var text = document.querySelectorAll('text');
var duration = setInterval(count, 14);
var c = 0;
function count(){
    for (var i = 0; i < text.length; i++) {
       if(c == 101){
            clearInterval(time);
       }else {
           text[i].textContent = c + '%';
       }
    }
    c++;
}

, но я хочу иметь различный текст / номер для каждого элемента.я попробовал приведенный ниже код, но число переходит от 0 к значению, которое я указал. 

var text = document.querySelectorAll('text');
var duration = setInterval(count, 14);
var c = 0;
function count(){
    for (var i = 0; i < text.length; i++) {
       if(c == 82){
           text[0].textContent = c + '%';
       }else if(c == 46){
           text[1].textContent = c + '%';
       }else if(c == 76){
           text[2].textContent = c + '%';
       }else if(c == 56){
           text[3].textContent = c + '%';
       }else if(c == 26){
           text[4].textContent = c + '%';
       }else if(c == 96){
           text[5].textContent = c + '%';
       }
    }
    c++;

}
setInterval(count, 14);

1 Ответ

0 голосов
/ 22 ноября 2018

Вы не нуждаетесь в выписке, поскольку вы получаете доступ ко всем элементам вручную, и вы хотите, чтобы числа менялись, пока их значение меньше целевого значения: 

function count(){
       if(c <= 82)
           text[0].textContent = c + '%';
       if(c <= 46)
           text[1].textContent = c + '%';
       if(c <= 76)
           text[2].textContent = c + '%';
       if(c <= 56)
           text[3].textContent = c + '%';
       if(c <= 26)
           text[4].textContent = c + '%';

//after reaching to highest number you need to stop the clock

       if(c <= 96)
           text[5].textContent = c + '%'
       else 
           clearInterval(time);

    c++;
}
...