今日完成：

（js任务一）

使用原生js完成九宫格随机三格随机变色。

给九宫格页面加上两个按钮，一个启动按钮，一个停止按钮。

然后给按钮加上点击事件：

<button id="start" onclick="start();">开始闪</button>
<button id="end" onclick="end();">结束闪</button>

原生js没有生成指定范围随机整数的api，所以得写个生成随机数方法：

//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
    switch (arguments.length) {
        case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
        case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
        default:
            return 0;
            break;
    }
}

获取dom中九宫格的div:

<div class="outer">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</div>

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

随机改变九宫格颜色方法：

function change() {
    var div1 = randomNum(0, 9);
    var r1 = randomNum(0, 255);
    var g1 = randomNum(0, 255);
    var b1 = randomNum(0, 255);

    var div2 = randomNum(0, 9);
    var r2 = randomNum(0, 255);
    var g2 = randomNum(0, 255);
    var b2 = randomNum(0, 255);

    var div3 = randomNum(0, 9);
    var r3 = randomNum(0, 255);
    var g3 = randomNum(0, 255);
    var b3 = randomNum(0, 255);

    list[div1].style.backgroundColor = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
    list[div2].style.backgroundColor = "rgb(" + r2 + "," + g2 + "," + b2 + ")";
    list[div3].style.backgroundColor = "rgb(" + r3 + "," + g3 + "," + b3 + ")";

    console.log({div1,r1,g1,b1});
    console.log({div2,r2,g2,b2});
    console.log({div3,r3,g3,b3});

    console.log("====================================================")
    
}

点击按钮后，要让change方法一直循环执行。使用setInterval实现

function start(){
     stop = setInterval(change,1000);
}

function end() {
    clearInterval(stop);
    location.reload();
}

配合end方法停止并刷新页面。

测试一下：

在change()方法中加入断点

点击开始按钮后debug:

可以看到随机数已经生成。继续执行

执行完第一条对div背景色css操作后：

div1:6 也就是第7个格子已经变色了，然后继续debug:

两个格子已经变了，继续debug

好像有点问题呢，一轮下来只有两个格子变色了。要求是三个！

问题出在下面这个代码上

var div1 = randomNum(0, 9);

从·list数组中取三个，用随机数取没问题，但有一点需要注意：不能重复!

取格子的随机数不能重复。颜色rgb可以重复

再写一个生成三个不重复随机数的方法：

//生成三个不重复的随机数
function three() {
    var first = randomNum(0, 8);
    var second = randomNum(0, 8);
    var third = randomNum(0, 8);
    if (second === first) {
        while (second === first) {
            second = randomNum(0, 8);
        }
    }

    if (third === second) {
        while (third === second) {
            third = randomNum(0, 8);
        }
    }
    if (third === first) {
        while (third === first) {
            third = randomNum(0, 8);
        }
    }

    return [first, second, third];
}

遇到的问题：

外联引入js文件，刚开始总是无效。

<script src="../js/task1.js" type="javascript" ></script>

最后发现去掉type="javascript"就好了。

收获 ：

了解了js对dom元素的简单操作

明日计划：

完成任务一的深度思考，开始任务二。

css没做的深度思考也穿插在js任务中补吧