js问题，为什么这个代码这样写后面的div就跟不过来？

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            div {
                  width: 20px;
                  height: 20px;
                  background-color: red;
                  border-radius: 50%;
                  position: absolute;
            }
      </style>
      <script>
            window.onload = function () {
                  var arr = document.getElementsByTagName("div");
                  for (i = arr.length - 1; i > 0; i--) {
                              arr[i].style.top = arr[i - 1].offsetTop + "px";
                              arr[i].style.left = arr[i - 1].offsetLeft + "px";
                        }
                  document.onmousemove = function (ev) {
                        var e = ev || window.event;
                        
                        arr[0].style.top = e.clientY + "px";
                        arr[0].style.left = e.clientX + "px";
                  }
            }
      </script>
</head>

<body>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
</body>

</html>

我把

for (i = arr.length - 1; i > 0; i--) {

arr[i].style.top = arr[i - 1].offsetTop + "px";

arr[i].style.left = arr[i - 1].offsetLeft + "px";

}

写在了触发函数外面，但是我认为我可以用for循环将里面圆点的位置全部都变成我想要的位置后（把后一个圆点放在前一个圆点位置上），然后再用onmousemove函数让第一个圆点跟随鼠标就行了，但是为什么按照这个逻辑后面的圆点无法跟随第一个圆点？

先说你代码中第一个问题，window.onload内的函数会在页面加载时执行，你在里面先通过for循环修改了样式，然后给document添加了一个鼠标滑动事件，想要做一个鼠标跟随的效果。鼠标滑动的匿名函数里你会更具当前的鼠标位置去修改第一个arr的位置属性，但是后面的小圆点的位置你没有去修改呀，你只是在页面加载时去修改了后面小圆点的样式，那么你的鼠标变只能控制第一个小圆点，如果想要控制后面的小圆点，应该将for循环封装到一个函数里，然后滑动事件去调用这个函数。

然后是for (i = arr.length - 1; i > 0; i--)中，i的问题，这里你的i没有在for循环中定义，直接这样使用i，i会被解析为一个全局变量，你现在只有一个循环，当循环for函数有两个以上并且都用i的时候，会导致全局变量污染，这就是很严重的bug了，正常情况下你应该使用for (let i = arr.length - 1; i > 0; i--)。而且由于你这里的i是一个全局变量，就会导致i的值不停的被覆盖重写，当你for循环执行完以后i的值为0，那么你的所有arr[i]都是arr[0],

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            div {
                  width: 20px;
                  height: 20px;
                  background-color: red;
                  border-radius: 50%;
                  position: absolute;
            }
      </style>
      <script>
            window.onload = function () {
                  var arr = document.getElementsByTagName("div");
                  for (i = arr.length - 1; i > 0; i--) {
                        arr[i].style.top = (arr[i - 1].offsetTop + 100 * i) + "px";
                        arr[i].style.left = (arr[i - 1].offsetLeft ) + "px";
                  }
                  document.onmousemove = function (ev) {
                        var e = ev || window.event;

                        arr[0].style.top = e.clientY + "px";
                        arr[0].style.left = e.clientX + "px";
                  }
            }
      </script>
</head>

<body>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
</body>

</html>

值没有写对,默认值都是0

 window.onload = function () {
            var arr = document.getElementsByTagName("div");

            document.onmousemove = function (ev) {
                  var e = ev || window.event;
                  arr[0].style.top = e.clientY + "px";
                  arr[0].style.left = e.clientX + "px";
                    
                  for (i = arr.length - 1; i > 0; i--) {
                        arr[i].style.top = arr[i - 1].offsetTop + 10 + "px";
                        arr[i].style.left = arr[i - 1].offsetLeft + "px";
                  }
            }

      }

这样试试