36.悬浮板

悬浮板

html部分

<div class="container"><div class="square"></div>
</div>

css部分

*{margin: 0;padding: 0;
}
body{background-color: #111;height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center;
}.container{display: flex;justify-content: center;align-items: center;max-width: 400px;flex-wrap: wrap;
}
.square{background-color: #1d1d1d;box-shadow: 0 0 2px #000;height: 16px;width: 16px;margin: 2px;transition: 2s ;
}
.square:hover{transition-duration: 0s;
}

js部分

// 获取dom
const container=document.querySelector(".container")// 颜色数组
const colors=['#e74c3c','#8e44ad','#3498db','#e67e22','#2ecc71']// 方块数量
const num=519;// 生成方块并且绑定事件
for(let i=0;i<num;i++){const square=document.createElement("div")square.classList.add("square")square.addEventListener("mouseover",()=>{setColor(square)})square.addEventListener("mouseout",()=>{removeColor(square)})container.appendChild(square)
}// 设置颜色
function setColor(dom){dom.style.backgroundColor=colors[Math.floor(Math.random()*colors.length)]
}
// 移除颜色
function removeColor(dom){dom.style.backgroundColor='#1d1d1d'
}

效果