发表于： 2019-08-21 22:44:40

今天完成的事

今天完成了任务一，任务一开始做的时候一点头绪也没有，感觉挺困难的，但是经过师兄的点拨有了思路。首先分析了一下任务一的需求，每一秒随机选择3个小方块改变颜色其他6个小方块不改变颜色，点击开始摁纽开始变色，点击结束摁纽取消变色。首先要实现随机抓取3个小方块，这个地方开始是难住我了，后来经过师‍‍兄的指导，我明白了div是一个从0开始排的数组，所以随机抓取3个小方块就是从0到8这九个数之间随机抽3个数。有了思路就好办了，随机抽数我百度了一下用的是Math.random()和Math.floor()函数，Math.random()函数是随机抽取0到1（不包含1）之间的随机数，Math.random()函数是向下取整，因为是随机取3个数，并且这3个数不能重复，不然就是2个或者1个方块了，建了3个变量并用了一个判断语句判断‍‍。之后是随机的 3个方块在随机的变换颜色，这个跟选方块类似也是用Math.random()函数和Math.floor()函‍‍数，然后师兄给了我一个思路，因为颜色可以是rgb(, , )表达，所以随机出来3个数在用字符串的形式把他们相加就是一个颜色，在分配到3个随机的方块上就行了‍‍。然后就是按开始‍‍摁纽变色，然后按结束摁纽停止。‍‍这个地方师兄告诉我用的是定时器setInterval，官方介绍setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。‍‍人话就是用它可以一直执行一个函数或者表达试除非用 clearInterval()断掉或者把窗口关了。这里我之前踩了一个坑，因为除了随机的3个方块，其他方块要保持原来的颜色，但是我没注意所以开始时我是这样写的直接执行随机选取3个方块变色的函数结果，array（）函数是我设计的随机选取3个方块变色的函数，但是我忽略了其他六个方块不能变色的条件，所以直接运行它其他六个方块也会变色，所以要在这个函数之前在加一个让9个方块保持原来颜色的函数，这里我借鉴师兄了的函数。，然后结束摁纽用clearInterval()关闭。同时把方块恢复到原来的颜色关于这个让所有方块恢复颜色的函数我有了一些想法，这个函数目的就是让方块全部恢复成原来的颜色，那有没有其他方法。我‍‍想了想之前看到的一个例子用getElementById选取元素节点可以直接修改元素的颜色，那我把getElementById换成getElementsByClassName不就好了，因为getElementsByClassName是抓取数组，也就是说把9个小方块全部抓取了，这要是直接改不就9个小方块都能修改颜色了吗，结果就是我想的太天真了换成‍‍getElementsByClassName报错了‍‍。我查了下getElementsByClassName官方给的文档是这样说的获取所有指定类名的元素：getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。也就是说虽然把九个小方块全部抓取了，但是要修改的话得通过节点一个一个修改