js鼠标移动的轨迹

<style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      /* background: red; */
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      cursor: default;
    }
  </style>

<script>
  for (var i = 1; i <= 200; i++) {
    var oDiv = document.createElement('div');
    oDiv.innerHTML = i;
    oDiv.style.background = `rgb(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)})`
    document.body.appendChild(oDiv);
  }

  var oBalls = document.querySelectorAll('div');

  var r = oBalls[0].offsetWidth / 2;

  document.onmousemove = function (e) {
    var ev = event || e;
    var x = ev.x;   // 获取鼠标的可视x坐标
    var y = ev.y;   // 获取鼠标的可视y坐标

    oBalls[0].style.cssText += `left: ${x - r}px; top: ${y - r}px`; // 直接修改元素的style属性
    for (var i = oBalls.length - 1; i > 0; i--) {
      oBalls[i].style.left = oBalls[i - 1].style.left;
      oBalls[i].style.top = oBalls[i - 1].style.top;
    }
  }
</script>