前言：简单回顾一下来时的路。今天事情偏多，先简单做一集，看看效果。然后争取做一个2-4的综合讲解。

第一集 入门

一开始接触到这个任务会感觉很乱，会不知道该做什么。现在回过头来看，发现头绪全在官网的任务步骤里。 
阅读后我们可以发现这样的顺序，首先要点击左边的按钮，然后触发一个定时的函数，在这个函数里完成选择三个盒子，涂色等一系列步骤。

所以第一个问题，如何完成一次点击事件

需要点击，首先需要获取到点击到的元素，常称为html节点。获取节点的过程称为操作DOM，大体形式为 
document.getElementById(“”); 
常用有by Id，by ClassName两种，不常用有tagname 
id方法获取到的为对象，classname获取到的为数组。 
有了DOM节点，就可以写点击事件了。假设获取到的节点对象为btn，那么有： 
第一种，btn.onclick = function ( ) 
第二种，添加事件监听：btn.addEventListener(‘click’,function( ) ) 
第三种，首先声明一个函数demo ( )，然后在html里写onclick=”demo( )” 
实际上第一三种一样，但是第一二种有些许差别。绑定同一DOM节点的onclick多个事件，前面的会被后面的覆盖；绑定同一DOM节点的多个事件监听，会一次生效。 
接下来是定时或者延时器，这个自有自带的方法。 
setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。 
setInterval方法则是表示间隔一定时间反复执行某操作。 
接下来我们具体想要实现的步骤：

随机取三个盒子

因为一共有九个盒子，那么这个问题就转换为从0~8里面取三个数。一次取三个数没有直接的办法，但我们知道math.random( )方法可以产生一个[0，1)的随机数，所以我们吧这个方法*9，那么就变成了[0，9），由于右边是开区间，取整之后正好是在0-8这九个数中中取一整数。如此循环三次，就从九个数中取了三个数出来。不过我们这样取一定会出现重复，而任务要求是要去三个不重复的数，所以要在这里加一条判断，如果三个数两两不等则继续运行，否则重新执行。至此实现随机取三个盒子

随机获取三个颜色

十六进制颜色由“#”和0~9，a~f十六个数字随机取六个数字组成的6位字符串，我们只要通过上面随机数的方法，分六次随机出露个数字，即可产生一个颜色。又因为此处并没有要求颜色要两两不等，所以生成即可。

将随机出来的颜色值分别添加到3个格子的样式上

这里涉及到简单的DOM操作 
dom.style.background，意为“节点的样式的背景颜色”，即可吧随机出的颜色赋给各个盒子。

一些细节

此任务到这里也就可以做出来了，但是仍有一些细节，比如在每次给小方块涂色之前吧颜色重新涂成橙色，再比如可以先声明一个变量为1，执行这个过程后将变量清零，然后进行判断，若变量为一才执行函数，这样即可避免定时器无限叠加。