-
使用原生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的数字
-
完成啦~~ 撒花~！
相关文章：