Effect:
The code shown
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content=" edge"> < span style> * {box-sizing: border-box! Important; 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. Implement map // 2. Register mouse over event // 3 for each cell. The mouse to set the background color of the random small grid, / / 4. The mouse moved out, set the timer, color restore 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'); 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>Copy the code