Javascript 的进度条循环答案

【问题标题】：Progress Bar Loop For JavascriptJavascript 的进度条循环
【发布时间】：2021-06-22 17:30:26
【问题描述】：

如何插入带有百分位数计算的进度条以在 html 中返回表格？

for (let index = 0; index < array.length; index++) {
    
    var table_content = '<table><tr>'
    +'<td style= "font-size: 18px;" >' + array[index].value1 + '</td>'
    +'<td style= "font-size: 18px;" >' + array[index].value2 + '</td>'
    +'<td style= "font-size: 18px;" >' 
    + '</div>'
    + '</div>'
    + '</tr></table>';
    
    list_array.push(table_content);

    $("#div").html(list_array);```
    
}

【问题讨论】：

标签： javascript loops for-loop progress-bar

【解决方案1】：

这是你想要的吗？

我不知道如何使用 JQuery，所以我使用了 document.querySelector()
我添加了一个超时，让你看到它正在工作

const array = [
  {
    value1: '1',
    value2: '2',
  },
  {
    value1: '3',
    value2: '4',
  },
  {
    value1: '5',
    value2: '6',
  },
]

for (let index = 0; index < array.length; index++) {
    setTimeout(() => {
      var table_content = '<table><tr>'
      +'<td style= "font-size: 18px;" >' + array[index].value1 + '</td>'
      +'<td style= "font-size: 18px;" >' + array[index].value2 + '</td>'
      +'<td style= "font-size: 18px;" >' 
      + '</div>'
      + '</div>'
      + '</tr></table>';

      document.querySelector('#div').innerHTML += table_content
      document.querySelector('#progress-bar').value = (index+1)/array.length*100
    }, (index+1) * 1000)
}

<div id="div"></div>
<progress id="progress-bar" value="0%" max="100" />

【讨论】：