今日已将任务一：九宫格完成，看似很简单的问题，却废了我很大的功夫，经常卡在一个点上，想明白之后就发觉这是多么得简单啊。

最终完成效果图如下：

以下是代码部分：

 HTML：

    <main>

        <div class="box">

            <ul>

                <li class="grid"></li>

                <li class="grid"></li>

                <li class="grid"></li>

            </ul>

            <ul>

                <li class="grid"></li>

                <li class="grid"></li>

                <li class="grid"></li>

            </ul>

            <ul>

                <li class="grid"></li>

                <li class="grid"></li>

                <li class="grid"></li>

            </ul>

        </div>

        <button class="start-btn">请开始你的表演</button>

        <button class="end-btn">够了可以结束了</button>

    </main>

css： 

@import url(https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css);

@import url(./font.css);

main {

    position: relative;

    max-width: 380px;

    max-height: 640px;

    margin: 0 auto;

    margin-top: 40px;

    padding: 10px;

    border-radius: 4px;

    background-color: #fefefe;

    box-shadow: 0 2px 3px 1px rgba(38, 50, 56, 0.16);

}

.box {

    margin-bottom: 20px;

}

.box > ul {

    display: flex;

    justify-content: space-between;

    padding-left: 0;

    margin: 0;

    margin-bottom: 10px;

}

.box > ul > li {

    float: left;

    min-height: 120px;

    width: 120px;

    list-style: none;

    border-radius: 4px;

    background-color: #90A4AE;

    -webkit-transition: transform 0.2s ease-out;

    -moz-transition: transform 0.2s ease-out;

    transition: transform 0.2s ease-out;

}

.box > ul > li:hover {

    -webkit-transform: scale(1.2);

    -moz-transform: scale(1.2);

    -ms-transform: scale(1.2);

    -o-transform: scale(1.2);

    transform: scale(1.2);

}

button {

    -webkit-transition: all 0.2s ease-in;

    -moz-transition: all 0.2s ease-in;

    transition: all 0.2s ease-in;

    outline-style: none;

}

button:hover {

    background-color: #E91E63;

    color: #CFD8DC;

}

button:active {

    color: #fff;

    -webkit-transform: scale(1.05);

    -moz-transform: scale(1.05);

    -ms-transform: scale(1.05);

    -o-transform: scale(1.05);

    transform: scale(1.05);

}

.start-btn,

.end-btn {

    width: 100%;

    height: 50px;

    background-color: #2196F3;

    color: #f1f1f1;

    border: 0;

    border-radius: 4px;

    margin-top: 10px;

}

.end-btn {

    background-color: #F44336;

}

JavaScript：

const gobal = {

    clock: 0

};

(function() {

    let gridEls = document.getElementsByClassName('grid'),

        startBtn = document.querySelector('.start-btn'),

        endBtn = document.querySelector('.end-btn'),

        changeColor = null;

    startBtn.onmousedown = function() {

        clearInterval(gobal.clock);

        strobe(gridEls, 3, 1000);

    };

    endBtn.onmousedown = function() {

        clearInterval(gobal.clock);

        for (let i = 0, len = gridEls.length; i < len; i++) {

            let el = gridEls[i];

            el.style.backgroundColor = '#90A4AE';

        }

    };

}());

function createColor(num) {

    let value = Array(),

        color = Array(num);

    for (let i = 0; i < num; i++) {

        value[i] = Math.floor(Math.random() * 255);

        value[i + 1] = Math.floor(Math.random() * 255);

        value[i + 2] = Math.floor(Math.random() * 255);

        color[i] = 'rgb(' + value[i] + ',' + value[i + 1] + ',' + value[i + 2] + ')';

    }

    return color;

}

function createNumber(num1, num2) {

    let number = Array(num1);

    for (let i = 0; i < num1; i++) {

        number[i] = i;

    }

    for (let i = 0; i < num1; i++) {

        let iRand = parseInt(num1 * Math.random()),

            temp = number[i];

        number[i] = number[iRand];

        number[iRand] = temp;

    }

    return number.slice(0, num2);

}

function strobe(els, num, time) {

    gobal.clock = setInterval(function() {

        for (let i = 0, len = els.length; i < len; i++) {

            let el = els[i];

            el.style.backgroundColor = '#90A4AE';

        }

        let colorArr = createColor(num),

            numberArr = createNumber(9, num);

        for (let i = 0, len = numberArr.length; i < len; i++) {

            let index = numberArr[i],

                el = els[index];

                el.style.backgroundColor = colorArr[i];

        }

    }, time);

}

至此，以上是所有代码，明日将完成任务二