如何用JavaScript实现点击div时随机位移并生成HSL随机背景色

修正后完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击圆形随机变色移动</title>
    <style>
        /* 要给html也设置高度，否则body的100%高度不生效 */
        html,body{
            height:100%;
            margin: 0;
            /* body设相对定位，子元素绝对定位以此为基准 */
            position: relative;
        }
        div {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            /* 开启绝对定位才能修改top/left控制位置 */
            position: absolute;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <script>
        const bodyEl = document.querySelector("body");
        const divEl = document.createElement("div");

        // 封装更新颜色和位置的函数，方便初始化和点击时复用
        function updateDiv() {
            // 生成随机色相0-360，拼接成正确的hsl颜色字符串
            const randomHue = Math.floor(Math.random() * 361);
            divEl.style.backgroundColor = `hsl(${randomHue}, 100%, 50%)`;

            // 生成随机位置，减去div自身宽高避免超出可视区域
            const maxTop = bodyEl.clientHeight - divEl.offsetHeight;
            const maxLeft = bodyEl.clientWidth - divEl.offsetWidth;
            divEl.style.top = `${Math.floor(Math.random() * maxTop)}px`;
            divEl.style.left = `${Math.floor(Math.random() * maxLeft)}px`;
        }

        // 初始化时先调用一次设置初始颜色和位置
        updateDiv();
        // 绑定点击事件，每次点击触发更新
        divEl.addEventListener('click', updateDiv);

        bodyEl.appendChild(divEl);
    </script>
</body>
</html>

关键改动说明 #

• 布局相关：给html和body同时设置100%高度，body开启相对定位作为div定位的父级基准，div开启绝对定位支持位置调整
• 颜色生成：按照题目要求固定饱和度100%、亮度50%，仅随机生成0~360范围内的色相值，拼接为合法的hsl颜色字符串
• 位置计算：随机位置时减去div自身的宽高，避免圆形元素部分超出可视区域
• 事件绑定：给圆形div绑定click事件，每次点击触发颜色和位置的更新逻辑

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