色彩板案例

实现效果:
色彩板.gif

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>色彩板</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            background-color: #111;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .square {
            background-color: #1d1d1d;
            box-shadow: 0 0 2px #000;
            margin: 2px;
            width: 16px;
            height: 16px;
            transition: 2s linear;
            
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- <div class="square"></div> -->
    </div>
</body>

</html>
<script>
    // 1.实现map
    // 2.给每一个小格子注册鼠标移入事件
    // 3.鼠标移入小格子设置随机的背景颜色,
    //4.鼠标移出,设置定时器,颜色恢复

    let container = document.getElementsByClassName('container')[0];
    let colors = ["#e74c3c", "#8e44ad", "#3498db", "#e67e22", "#2ecc71"];
    let squareTotal = 20000;
    for (let i = 0; i < squareTotal; i++) {
        let square = document.createElement('div');
        square.classList.add("square")
        container.appendChild(square)
    }
    let squareList = document.getElementsByClassName('square');
    // 第一次循环,给每个div注册事件
    for (let i = 0; i < squareList.length; i++) { 
        squareList[i].setAttribute('squareIndex', i)
        squareList[i].onmouseover = function (e) {
            e.target.style.backgroundColor = getRandomColor();
            setInterval(() => {
                e.target.style.backgroundColor = "#1d1d1d";
            }, 2000);
        }
    }

    function getRandomColor(){
        let numRed = Math.floor(Math.random()*256)
        let numBlue = Math.floor(Math.random()*256)
        let numGreen = Math.floor(Math.random()*256)      
        return `rgb(${numRed},${numBlue},${numGreen})`
    }
</script>

色彩板案例

芹丸子

引用和评论

vue3 使用provide inject父子组件传值传不过去且传递后子组件不具备响应性

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了