Question

我有一个多个饼图，其中包含文本以显示百分比，并且我想为其设置动画。下面的代码递增，直到数量达到100为止的计数。

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);

Answer 1

您不需要声明，因为您正在手动访问所有元素，并且您希望数字在值小于目标值时更改：

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++;
}

如何在多个文本上添加计数器

1 个答案: