Question

真正陷入这个......我正在努力建立一个捐赠进度条......在ReactJS中 - 但我是初学者，所以我想先在Vanilla js中获得正确的代码......

我正在尝试做的是循环一系列数字，（也就是已经通过表单提交的捐款）。 EG：

[2,5,25]等。

每次提交捐款时，都会将其添加到此阵列中。

我想要的是，根据已经在阵列中捐赠的内容，我的捐款栏可以增加/填充颜色。

酒吧将满100％。或100英镑。

以下是我已经拥有的JS片段：

  // FUNCTION TO CALCULATE TOTAL DONATIONS
const numbers = donated.map(Number);
  function add(a, b) {
   return a + b;
}
// SUM VALUE OF NUMBERS IN THE ARRAY
const sum = numbers.reduce(add, 0);
console.log('numbers', numbers);

//THE VALUE OF NUMBERS IN ARRAY, TURNED INTO A PERCENTAGE
const total = 100;
const percentage = (sum / total) * 100;
console.log('percentage', percentage);

// LOOP THROUGH EVERY NUMBER IN THE ARRAY, AND ADD A DIV WITH A MATCHING WIDTH  
for (var i = 0; i < numbers; i++) {
  if (i < 100) {
    const div = document.createElement('div');
    div.style.background = 'red';
    div.style.width = numbers + 'px';
    div.style.height = '50px';
    div.style.float = 'left';
    document.querySelector('.bar').appendChild(div);
  }
}

循环有效。数组中的第一个div被添加。但是当我添加更多捐款时，进度条中不再添加任何div。

最终，我想停在100 ......

Answer 1

搞定了！我需要在我的样式宽度中设置数字[i]：

  for (var i = 0; i < numbers.length; i++) {
if (i < 100) {
  div +1;
  const div = document.createElement('div');
  div.style.background = 'red';
  **div.style.width = numbers[i] + 'px';**
  div.style.height = '50px';
  div.style.float = 'left';
  document.querySelector('.bar').appendChild(div);
}

}

Answer 2

正如我所看到的那样，你设计了你的div向左浮动。这意味着每个div将出现在左边的上一个。在chrome中，右键单击div并左键单击inspect。您将看到在Dom中生成了许多div。

进度条 - 循环数组和显示分区

2 个答案: