[散修弟子]JS-194|2016年04月26日的日报-技能树.IT修真院

发表于： 2016-04-26 23:30:02

4 2260

昨天完成的事情：

把js教程从头到尾看了一遍，把 HTML DOM教程从头到尾过了一遍，很多东西不是很理解，但是至少有个印象，以方便后面做任务时有个思考方向。。晚上看了一下关于JS编码规范相关的文档，很多东西，记住了一点点，以后经常翻看加深记忆。

今天完成的事情：

正式开始写task1，之前看过几篇师兄师姐们的日报，大概知道需要用到哪些知识，所以昨天过JS教程和HTML DOM的时候就留意了一下。比如要用到的JS的算数对象Math的一些方法，如.random(),.round(),还有window对象的一下方法，如.setInterval()来循环计时，了解.setTimeout()一些使用方法。以及常用的HTML DOM的几个方法。如getElementById()方法。等等。。。

一边做一边百度，但是根本百度不到原型。。。或多或少只能提供一些思路。。

首先是如何获选中随机选中9个格子然后改变他们的背景色。百度到了关于.children 和 .childNodes 以及w3c实例中的getElementsByTagName(),好像都是返回一个类似数组一个集合，然后像数组一样访问他的值。。我试了下，显示getElementById获取9个div的父元素然后用.children方法和getElementsByTagName()配合Math.random()等方法即可达到目的。看了下childNodes方法返回的时候所有子节点的集合，包括子元素，注释节点，换行空格等等等。。好像用这个不用达到我的目的，简单试了下，没用选用。

随机颜色的话自己定义一个Array(3)，长度为3，添加3个值，随机选其中一个即可，这个没什么说的。最后把随机颜色数组的值赋值给格子随机数组.style.backgroudColor即可。

那么问题又来了。。看日报时候师兄们也遇到的问题，就是格子改变颜色后怎么还原，看到古尘师姐的日报中有提到把变量储存起来的思路,我觉得好像可以试试，按这个思路，我再定义第三个数组，每生成一个随机格子数的时候就用第三个数组把他储存起来，然后数组下标加1，这样一直储存，当给当前格子赋值随机色的时候，当前格子的上一个格子的随机数之前已经储存，这个时候检索出来，然后给他赋值为原来的颜色。那么这样一来，当前格子变色的同时上一个格子就会还原为原来的颜色。OK，达到目的。

基本所有的问题解决了，IE8下面也能正常换随机色。还有两个小BUG。就是上面的方法中第三个数组中下标为0的数永远取不到值，IE下会报错，那么我们给他赋一个0-8之前的数值即可。

做到这里，我突然感觉，怎么这么像数学里面的递推数列一样：第一个数不符合规则单独赋值，后面的数递推。