• 使用原生JS完成了繽紛色彩板Demo

• 2020-03-17

• 源碼在https://gitee.com/jimmyxuexue/excellent_interface/tree/master/%E7%BC%A4%E7%BA%B7%E8%89%B2%E5%BD%A9%E6%9D%BF

• 先上Demo

• Demo描述： 當鼠標移入小方格中時，會隨機出現一種顏色填充至方格，已開方格時顏色會逐漸消失

• 下面數逐一的知識點：

• HTML部分

• 只需要一個夫容器包裹即可，因為小方格有500個，手動敲肯定不合適，所以小方格是使用JS操作的

• css部分

• 我們給一個元素設置了transition時間時，如果入場不想要這個時間 可以再給這個元素設置hover的時候將過渡時間調整為0，這樣transition的過渡效果就只會加在離場時的動畫里了 這個是一個小知識點！

• JS部分

• JS部分代碼也不是很多，總體思路是先用數組定義好一些顏色的值，500個小方塊使用for循環，在循環內部創建div結點，給結點添加類，添加mousemove和mouserover事件，當鼠標移入的時候隨機添加一個背景顏色

• 自定義的函數一定要寫上function關鍵字

• Math.floor()是對數字進行上取整，

• Math.random()是瑞吉生成一個0-1的數字

• 完成啦~~ 撒花~！

總結

以上是生活随笔為你收集整理的原生JS制作缤纷色彩板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。