今天完成的事情：

1.修改任务一的一些问题

明天计划的事情：

1.理解代码含义。继续推进任务。

遇到的问题：

1.没有注意到某些时候会出现只有2个格子的颜色。且打印出来看数字和格子顺序对照不上。

function myNum() {
    var a = [0, 1, 2, 3, 4, 5, 6, 7, 8];
    var b = [];
    for (var i = 0; i < 3; i++) {
        var num = Math.floor(Math.random() * a.length);
        b.push(a[num]);
        a.splice(num, 1);
    }
    return b;
}//获得3个不同随机数

function changeColor() {
    var colorOne = getColor();
    var colorTwo = getColor();
    var colorThree = getColor();

    box[myNum()[0]].style.backgroundColor = colorOne;
    console.log(myNum()[0]);
    box[myNum()[1]].style.backgroundColor = colorTwo;
    console.log(myNum()[1]);
    box[myNum()[2]].style.backgroundColor = colorThree;
    console.log(myNum()[2]);
    

首先是洗牌算法，用console.log(myNum())打印出来并无问题。所以排除。

F12发现打印出的

console.log(myNum()[0]);

得到的随机数会有重复，并且和盒子顺序不对应。我的本意是每个box都分别获取myNum()里的[0]，[1]，[2]三个位置的随机数。自己琢磨不明，然后询问师兄。

师兄的解释是，如果这样写，虽然是也会得到

myNum([0])

里面的一个随机数，但每个box都会重新请求这个函数，相当于myNum又重新取值了，所以就可能会出现相同的值。师兄建议的修改方法：

var b;
function myNum() {
    var a = [0, 1, 2, 3, 4, 5, 6, 7, 8];
     b = [];
    for (var i = 0; i < 3; i++) {
        var num = Math.floor(Math.random() * a.length);
        b.push(a[num]);
        a.splice(num, 1);
    }
    return b;
}//获得3个不同随机数

function changeColor() {
    var colorOne = getColor();
    var colorTwo = getColor();
    var colorThree = getColor();
    myNum();
    box[b[0]].style.backgroundColor = colorOne;
    console.log(b[0]);
    box[b[1]].style.backgroundColor = colorTwo;
    console.log(k[1]);
    box[b[2]].style.backgroundColor = colorThree;
    console.log(b[2]);

将myNum()内的b定义在外部，此时b就相当于一个有3个随机数的数组。那么将myNum函数放进changeColor内，每次执行时都会运行一遍myNum，把box内的数组取值改为b的[0]，[1]，[2]。这样的好处就是取随机数的函数myNum()只运行了一次，b里产生3个随机数，再用b里面的随机数组组成box的盒子名。最后完成。

另外取随机数也可以用另一种方法，不使用洗牌法，这种相对好理解一点，这个任务里也容易些。

one = Math.floor(Math.random()*box.length);//生产三个随机数
    two  = Math.floor(Math.random()*box.length);
    three = Math.floor(Math.random()*box.length);
    while (one===two||two===three||three===one){//保证生成三个数各不同
        if (one===two){
            one=Math.floor(Math.random()*box.length);
        }
        else if (two===three){
            two=Math.floor(Math.random()*box.length);
        }
        else if (three===one){
            three=Math.floor(Math.random()*box.length);
        }
    }
}

就是定义出one，two，three3个变量，用Math方法取出盒子长度的随机数，即为0~8，然后用while+if语句判断是否重复，当三者只要有一组相等，就会重复执行while语句，进入while后由if判断相等的情况，再重新赋值，然后回到while判断是否还有重复。

box[one].style.backgroundColor  = colorOne;//随机色附加在随机盒子上

box[two].style.backgroundColor  = colorTwo;

box[three].style.backgroundColor= colorThree;

最后将one、two、three放进box数组里。也能得到同样的效果。

收获：

console.log();

它是一个调试命令，比如我放在每个box后面的命令

box[b[0]].style.backgroundColor = colorOne;
console.log(b[0]);
box[b[1]].style.backgroundColor = colorTwo;
console.log(b[1]);
box[b[2]].style.backgroundColor = colorThree;
console.log(b[2]);

显示效果如下：

能反应出我取到的随机数到底是多少。图上为0,3,8，能对应到盒子顺序。

while和if语句的使用。While语句是条件为真就循环，本任务用到了  ||  ，这是逻辑运算符或，其一真为真，全假为假。用于判断盒子取到的颜色是否一致。