Question

我必须创建一个20列的条形图。最右边的条形图每秒更新一次，带有一个随机数，该数字赋予其高度。一秒钟后，该值将转移到左侧的邻居，依此类推。为了将数组中的值连接到CSS，我创建了这段代码。左边的（barchart）通过querySelectorAll连接到div，然后用[i]索引，右边的i从数组中获取相应的值。因为我需要做20条，所以使用for循环会很有意义，但是我真的不知道如何创建它...有什么想法吗？

    const arr = [];
    let number = "";

    function timer() {
        setInterval(function () {
            number = Math.floor((Math.random() * 100) + 1);
            const barchart = document.querySelectorAll(".bar");

            barchart[4].style.height = number + "%";
            barchart[3].style.height = arr[4] + "%";
            barchart[2].style.height = arr[3] + "%";
            barchart[1].style.height = arr[2] + "%";
            barchart[0].style.height = arr[1] + "%";


            arr.push(number);

            if (arr.length > 5) {
                arr.shift();
            }
            console.log(arr);
        }, 1000);
    }

如何将其缩短为一个循环？

    barchart[4].style.height = number + "%";
    barchart[3].style.height = arr[4] + "%";
    barchart[2].style.height = arr[3] + "%";
    barchart[1].style.height = arr[2] + "%";
    barchart[0].style.height = arr[1] + "%";

Answer 1

看看到目前为止第一次运行代码arr的情况是什么时候都没有任何初始化，而您正在尝试到达返回undefined的超出范围的索引

此外，如果计划更改其存储的值，则不应将初始化数组用作const。

现在解决手头的问题：

考虑到最右边的栏位于barchart的最后一个索引处，并且arr包含相应栏的高度：

//give the bar on the far right a random height.
barchart[barchart.length-1].style.height = number + "%";
//loop through barcharts array from end to start excluding the last bar.
for(let i=barchart.length-2; i>=0; i--)
  {
    //give each bar the height of his right neighbour
    barchart[i].style.height = arr[i+1] + "%";    
  }

JS：如何用这个做一个for循环？

1 个答案: