#今天完成的事

完成了js1

#明天计划的事

开始js2-4

#遇到的问题

因为昨天实现的九宫格，出现了很多问题，比如有时候显示两种颜色，有时候显示一种颜色，改来改去到后面有时候干脆不闪动了。所以全部删除了重写，通过在网上查各种资料，终于是没有bug的实现了。虽然网上查的的资料有些还不是很懂，就只是拿来用而已。

先说一下昨天后来改来改去都没改对的问题，说到底都是对知识不熟悉，很痛苦心里有想法却写不出的感觉。还是要多学多练，熟悉各种函数，语句，变量，数组的用法。昨天的问题是逻辑说不通。按照昨天的想法：

function begin() {
    var one = Math.floor(Math.random()*list.length);
    var two = Math.floor(Math.random()*list.length);
    var three = Math.floor(Math.random()*list.length);
    if(one==two){
        one = Math.floor(Math.random()*list.length);
    }else if(two==three) {
        two = Math.floor(Math.random()*list.length);
    }else if(one==three)  {
        three = Math.floor(Math.random()*list.length);
    }

假如one=two，one重新随机一个块，这里就是问题所在了，one的再次随机完全有可能再次随机到那个和two一样的块，所以要改变逻辑，再次随机要随机到除去one以外的其他块。后来想着想着，这么写似乎是多余的，因为本来就随机了三个块，只是有可能这三个块会随机到一个，但是这么写也有可能随机到一个，所以等于白写。后来又换了一种想法，虽然也是错误的，但还是说一下吧，既然上面觉得是多余的，所以干脆把上面都删了，我后面的想法是

function begin() {
    var one = Math.floor(Math.random()*list.length);
    var two = Math.floor(Math.random()*list.length);
    var three = Math.floor(Math.random()*list.length);
    if(one!==two&&two!==three&&one!==three){
        list[one].style.background = randomColor();
        list[two].style.background = randomColor();
        list[three].style.background = randomColor();
        console.log("abc:" + one + two + three);
    }
}
    function randomColor() {
    return '#'+(Math.random()*0xffffff<<0).toString(16);
}

如果1不等于2，且2不等于3，且1不等于3就赋予三个块一个随机背景色，后来一想这样的逻辑更加是不对的，因为一旦他们有两个相等了就干脆不执行了，问题更多，按照这种写法我觉得自己是想不出来了，干脆全部删除，重新写。

现在就告别昨天的过去，把今天正确实现的思路再捋一遍。

首先第一步是获取html中的元素

var list = document.getElementsByClassName('box');

第二步给两个按钮添加一个点击事件

<button id="run" onclick="start_flash()">
        开始闪
</button>
<button id="stop" onclick="end_flash()">
        停止闪
</button>

第三步，定义一个索引数组,这个数组里有九个值，对应九宫格

var ArrList = [0,1,2,3,4,5,6,7,8,];

第四步，比较关键的一步，获取不同的随机块！昨天不懂的就是这里，今天换了种方法

//从一个给定的数组arr中随机返回num个不重复项
function getArrayItems(arr,num) {
    //新建一个数组，将传入的数组复制过来，用于运算，而不要直接操作传入的数组
    var temp_array = new Array();
    for(var index in arr) {
    temp_array.push(arr[index]);
    }
//取出的数值项，保存在此数组
var return_array = new Array();
for(var i = 0;i<num;i++) {
    //判断数组还有可以取出的元素，以防下标越界
    if(temp_array.length>0) {
    //在数组中产生一个随机索引
    var arrIndex = Math.floor(Math.random()*temp_array.length);
    //将此随机索引的对应的数组元素值复制出来
    return_array[i] = temp_array[arrIndex];
    //然后删掉此索引的数组元素，这时候temp_array变为新的数组
    temp_array.splice(arrIndex,1);
    }else{
    //数组中数据项取完后，退出循环，比如数组本来只有10项，但要求取出20项.
    break;
    }
}
    return return_array;
}

这一段代码是在百度搜索“js在指定数组中随机取出不同的数据”得到的，在任务中就是获取不同的随机块，用法是这么用的，自己进行了理解，但是理解的还不够透彻。 
第五步，定义生成随机颜色的函数,这是在网上找的，方法有很多。

function randomColor() {
    //随机颜色
return '#'+('00000'+ (Math.random()*0x1000000<<0).toString(16)).substr(-6);
}

第六步，使用setInterval()方法实现一个无限循环的函数，setInterval(changeColor, 1000)，changeColor是选块变色函数，1000代表1000毫秒，每1000毫秒执行一次changeColor函数。

var start;//定义延时变量
function start_flash() {
    //延时函数，开始闪动
    window.clearInterval(start);//先清除延时，防止速度累加
    start = setInterval(changeColor,1000);
}

第七步，清除延时，停止时重置颜色，使用for循环遍历取得的NodeList中所有内容，并修改相应颜色

unction end_flash() {
    //停止闪动（使用延时变量清除延时）
    window.clearInterval(start);
    for(var i = 0;i<ArrList.length;i++) {
    ist[i].style.backgroundColor = "orange";
    }
}

最后贴个效果