请求指导：如何实现5个div随机初始位置及鼠标悬停切换位置功能

嘿，我来帮你搞定这个问题！先捋捋你代码里的核心问题，再给你一个能正常运行的完整方案～

你的代码里的问题 #

• 重复赋值丢失了大部分Div的引用：你在Init()里连续把5个Div赋值给同一个div变量，最后这个变量只会指向最后一个pixel4，剩下4个Div根本没被处理，自然不会动。
• 缺少鼠标悬停的事件绑定：你想要鼠标悬停时切换位置，但代码里完全没加相关的事件监听逻辑，这部分是缺失的。
• 可视区域计算错误：用screen.height/screen.width会拿到整个显示器的尺寸，但我们应该用浏览器窗口的可用空间（window.innerHeight/window.innerWidth），不然Div很容易跑到窗口外面看不到。
• HTML标签不规范：Div标签不能自闭合（<div/>），应该写成<div></div>，虽然浏览器可能容错，但规范写法能避免奇怪的问题。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Random Moving Divs</title>
    <script>
        let divs; // 存储所有div的数组

        function Init() {
            // 获取所有id以pixel开头的div，存到数组里
            divs = Array.from(document.querySelectorAll('[id^="pixel"]'));
            // 给每个div绑定鼠标悬停事件
            divs.forEach(div => {
                div.addEventListener('mouseover', moveAllDivs);
            });
            // 初始化时让所有div随机定位
            moveAllDivs();
        }

        function moveAllDivs() {
            divs.forEach(div => {
                // 计算可用空间：窗口尺寸减去div自身的尺寸，避免超出可视区域
                const availableWidth = window.innerWidth - div.offsetWidth;
                const availableHeight = window.innerHeight - div.offsetHeight;
                // 生成随机位置（用px单位更精准，百分比可能导致超出）
                const randomX = Math.floor(Math.random() * availableWidth);
                const randomY = Math.floor(Math.random() * availableHeight);
                // 设置div的位置
                div.style.left = `${randomX}px`;
                div.style.top = `${randomY}px`;
            });
        }
    </script>
</head>
<body onload="Init()">
    <div id="pixel" style="background-color:blue; position:fixed; height:50px; width:50px; font-size:25px;"></div>
    <div id="pixel1" style="background-color:green; position:fixed; height:50px; width:50px; font-size:25px;"></div>
    <div id="pixel2" style="background-color:orange; position:fixed; height:50px; width:50px; font-size:25px;"></div>
    <div id="pixel3" style="background-color:yellow; position:fixed; height:50px; width:50px; font-size:25px;"></div>
    <div id="pixel4" style="background-color:red; position:fixed; height:50px; width:50px; font-size:25px;"></div>
</body>
</html>

关键逻辑说明 #

• 用数组管理所有Div：通过document.querySelectorAll一次性获取所有目标Div，转成数组后可以批量操作每个元素，再也不会丢失引用啦。
• 悬停事件绑定：给每个Div都绑定mouseover事件，只要鼠标碰到任意一个Div，就会触发moveAllDivs函数让所有Div重新随机定位。
• 精准的位置计算：用window.innerHeight/window.innerWidth获取浏览器窗口的可视尺寸，减去Div自身的宽高，保证Div不会超出屏幕范围。
• 用px单位代替百分比：百分比定位容易出现Div部分超出窗口的情况，用px计算更精准可控。

内容的提问来源于stack exchange，提问作者Inspector Norse