如何通过JS实现网页内光标自动随机移动？

首先明确：你用的window.moveTo(x, y)是移动浏览器窗口位置的API，不是控制鼠标光标的方法，这就是看不到光标移动的核心原因。

浏览器出于安全限制，不允许前端JS直接操控真实系统鼠标光标，只能通过模拟自定义光标来实现视觉上的自动移动效果。以下是具体解决步骤：

核心解决思路 #

• 隐藏默认系统光标
• 创建一个自定义光标元素（比如圆形/箭头div）
• 用JS定时更新自定义光标的位置，配合CSS实现平滑移动

是否需要CSS transition？ #

如果希望光标移动是平滑过渡的动画效果，需要用CSS transition，它能让位置变化更自然；如果只需要瞬间跳转，那可以不用。

修改后的实现代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Auto Mouse Mover</title>
  <style>
    /* 隐藏默认光标 */
    body {
      cursor: none;
      margin: 0;
      min-height: 100vh;
    }
    /* 自定义光标样式 */
    .custom-cursor {
      position: fixed;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #ff4444;
      pointer-events: none; /* 避免干扰页面交互 */
      transition: all 0.3s ease; /* 平滑过渡动画 */
      z-index: 9999;
    }
  </style>
</head>
<body>
  <h1>Auto Mouse Mover</h1>
  <p>This page automatically moves the mouse to a random location every 5 seconds.</p>

  <!-- 自定义光标元素 -->
  <div class="custom-cursor"></div>

  <script>
    const cursor = document.querySelector('.custom-cursor');

    function moveMouse() {
      const x = Math.floor(Math.random() * window.innerWidth);
      const y = Math.floor(Math.random() * window.innerHeight);
      // 让自定义光标居中对齐坐标点（因为元素是20px宽高）
      cursor.style.left = `${x - 10}px`;
      cursor.style.top = `${y - 10}px`;
      
      console.log(x, y);
    }

    // 初始位置设置
    moveMouse();
    // 每1秒移动一次（你原来写的是1000ms=1秒，不是5秒，注意调整）
    setInterval(moveMouse, 1000);
  </script>
</body>
</html>

补充说明 #

• pointer-events: none 确保自定义光标不会阻挡页面上的按钮、链接等交互元素
• 自定义光标可以根据需求修改样式（比如改成箭头形状）
• 如果不需要平滑动画，去掉CSS里的transition属性即可

内容的提问来源于stack exchange，提问作者code-8