如何将九宫格点击开始按钮随机出现三个颜色，点击结束停止闪烁恢复原状

实现效果：

对于大神来讲其实是一个很简单的东西（当然我不是。。。）

结合网上的资料我找到了两种方法

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闪动的格子会越来越快变换

 

基本上就是这些，当然估计会有写的不合理，不清楚的地方，等我学成归来慢慢解决吧。。。。。