点击查看html编辑器说明文档

随机颜色生成器edit icon

|
|
Fork(复制)
|
|
作者:
时光

👉 新版编辑器已上线,点击进行体验吧!

BUG反馈
嵌入
设置
下载
HTML
CSS
JS
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ...
展开
</head>
<body>
            
            <!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>
        :root {
            --height: 210px;
            --width: 225px;
            --black: #2d2d2d;
        }

        *,
        *::before,
        *::after {
            margin: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            height: 100vh;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .color-card {
            box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
        }

        .color-card__top {
            height: var(--height);
            width: var(--width);
            border-radius: 3px 3px 0 0;
            background-color: #53ad6d;
        }

        .color-card__top:hover {
            cursor: pointer;
        }

        .color-card__bottom {
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: calc(var(--height)* .35);
            width: var(--width);
            background-color: white;
            border-radius: 0 0 3px 3px;
        }

        p.instructions {
            font-family: 'Roboto', sans-serif;
            font-weight: 200;
            font-size: 18px;
            color: var(--black);
        }

        p#hexNum {
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            font-size: 28px;
            color: var(--black);
            letter-spacing: 1px;
        }

        .copy:hover {
            cursor: pointer;
        }

        .copy:active {
            transform: scale(.9);
        }

        .copy,
        .copy::after {
            height: calc(var(--height)* .08);
            width: calc(var(--width)* .07);
            border-radius: 2px;
            border: 2px solid var(--black);
            background-color: white;
        }

        .copy::after {
            content: "";
            position: absolute;
            transform: translateX(3px) translateY(3px) translateZ(-1px);
        }

        /* Tooltip */
        .tooltip {
            content: "copy hex";
            flex: 0 0 100%;
            display: none;
            position: absolute;
            font-family: 'Roboto', sans-serif;
            font-weight: 200;
            font-size: 10px;
            color: var(--black);
            height: calc(var(--height)* .09);
            width: calc(var(--width)* .25);
            transform: translateX(91px) translateY(27px);
        }

        .copy:hover + .tooltip {
            display: inline;
        }
    </style>
</head>

<body>
    <h2>点击切换颜色</h2>
    <div class="color-card" id="colorCard">
        <div class="color-card__top" id="displayColor" onClick="changeColor()"></div>
        <div class="color-card__bottom">
            <p id="hexNum">#cd7780</p>
            <div class="copy" onClick="copyCode()"></div>
            <span class="tooltip">复制 hex 颜色</span>
        </div>
    </div>


    <script>
        // 存储当前随机颜色
        let randomColor = "#";

        // 生成随机十六进制颜色值
        const makeRandomColor = () => {
            // 使用更简洁的方式生成随机颜色
            const randomHex = Math.floor(Math.random()*16777215).toString(16);
            // 确保生成的颜色始终是6位
            randomColor = `#${randomHex.padStart(6, '0')}`;
            return randomColor;
        };

        // 更新颜色卡片显示
        const makeColorCard = () => {
            makeRandomColor();
            document.getElementById("hexNum").innerHTML = randomColor;
            document.getElementById("displayColor").style.backgroundColor = randomColor;
        };

        // 初始化颜色卡片
        makeColorCard();

        // 点击改变颜色
        const changeColor = () => {
            randomColor = "#";
            makeColorCard();
        };

        // 监听空格键
        document.addEventListener("keyup", (event) => {
            if (event.code === "Space") {
                changeColor();
            }
        });

        // 复制颜色代码到剪贴板
        const copyCode = () => {
            navigator.clipboard.writeText(randomColor)
                .then(() => {
                    // 复制成功后显示提示
                    const tooltip = document.querySelector('.tooltip');
                    tooltip.textContent = '已复制!';
                    setTimeout(() => {
                        tooltip.textContent = 'copy hex';
                    }, 1000);
                })
                .catch(err => {
                    console.error('复制失败:', err);
                });
        };
    </script>
</body>

</html>
        
</body>
预览
控制台