实现效果:
对于大神来讲其实是一个很简单的东西(当然我不是。。。)
结合网上的资料我找到了两种方法
HTML部分如下:
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="btn">
<button class="start" onclick="start()">Start</button>
<button class="end" onclick="end()">End</button>
</div>
CSS部分如下:
.content{
overflow: auto;
}
.box{
background-color: orange;
border-radius: 10px;
width: 30%;
margin: 1%;
padding-bottom: 30%;
float: left;
}
.btn {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
}
button{
width: 45%;
}
下面是JS部分
方法一、
思路是这样的
1、取小格子的DOM——box
2、将这些小格子DOM转化成数组——boxArray
3、因为是要随机选出3个小格子来变换颜色,所以新建一个新数组,用来存储随机出来的小格子——randomArray
4、将随机出来的小格子放入刚才新建的数组中
5、随机出hex color
6、把随机生成的颜色填到randomArray中
7、将按钮绑定点击时间
8、设置setInterval
var box = document.getElementsByClassName('box');
function shine() {
for (var i = 0; i < box.length; i++) {
box[i].style.backgroundColor='orange';
}
var boxArray = Array.prototype.slice.call(box,0);
var randomArray = new Array();
for (var i = 0; i < 3; i++) {
var num = Math.floor(Math.random()*boxArray.length);
randomArray.push(boxArray[num]);
boxArray.splice(num,1);
}
function colors() {
var hex = Math.floor(Math.random()*16777216).toString(16);
if (hex.length < 6) {
hex = '0' + hex;
}
return '#'+hex;
}
for (var i = 0; i < 3; i++) {
randomArray[i].style.backgroundColor=colors();
}
}
var time;
function start() {
clearInterval(time);
time=setInterval(shine,1000);
}
function end() {
clearInterval(time);
for (var i = 0; i < box.length; i++) {
box[i].style.backgroundColor='orange';
}
}
方法二、
思路是这样的
1、取小格子的DOM——box
2、随机出现的小格子,需要使随机出来的三个格子不相等
3、随机出来一个rgb color
4、将颜色组合好格式填入格子中
5、给按钮绑定点击事件
var box = document.getElementsByClassName('box');
var time;
function shine() {
var box1 = Math.floor(Math.random() * box.length);
var box2 = Math.floor(Math.random() * box.length);
var box3 = Math.floor(Math.random() * box.length);
if (box1==box2) {
box1=Math.floor(Math.random() * box.length);
} else if(box2==box3){
box2=Math.floor(Math.random() * box.length);
}else if(box1==box3){
box3=Math.floor(Math.random() * box.length);
}
box[box1].style.backgroundColor = 'rgb' + colors();
box[box2].style.backgroundColor = 'rgb' + colors();
box[box3].style.backgroundColor = 'rgb' + colors();
}
function colors() {
var rgb;
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
rgb = '(' + r + ',' + g + ',' + b + ')';
return rgb;
}
function start() {
clearInterval(time);
time = setInterval(function () {
for (var i = 0; i < box.length; i++) {
box[i].style.backgroundColor = '';
}
shine();
}, 2000);
}
function end() {
clearInterval(time);
for (var i = 0; i < box.length; i++) {
box[i].style.backgroundColor = '';
}
}
大体上就是这样两个方法差不多,从难度系数上来讲可能第二种方法更直观,代码书写上有点重复(但是我还不知道怎么精简,先这样吧,以后晋级再回来重写)
主要的知识点:
1、怎么随机出想要的范围的数字
Math.floor(Math.random()*length)
random选出[0,1)之间的数字后,乘以想随机的最大数+1得到[0,length),比如:我想得到下标范围为为0-8的格子,我就需要乘以9
2、怎么随机出颜色
方法一使用的是hex color,random选出[0,1)之间的数字后,乘以16777216(256×256×256),然后转化为16进制,最后前面加’#‘
方法二使用的是rgb color,random选出[0,1)之间的数字后,乘以256,然后组合(r,g,b)三个值就是一个rgb颜色了
3、绑定点击事件后设置SetInterval
start和end都要使用clear,如果没有的话每次点击start闪动的格子会越来越快变换
基本上就是这些,当然估计会有写的不合理,不清楚的地方,等我学成归来慢慢解决吧。。。。。