[真传弟子]翟金超|2016年12月23日的日报-技能树.IT修真院

发表于： 2016-12-23 23:43:16

2 1491

今天完成的事

s1笔记

添加点击事件时

btn1.onclick =changecolor;

的效果和

是一样的

第一次报错，获取九个div，为一个数组，然后直接操作背景色变为红色，因其是数组并非单个div所以无法操作背景色

而后

for( i = 0 ; i < color .length ; i++ ){
color[i].style.backgroundColor="red";

}

不过开始忘了加.style所以又错一次

而后尝试了for嵌套，第一个循环是div的数组，里面是颜色的数组，因为外面循环走一次，里面都会走完到数组最后一个值，所以九个都是最后一个颜色

然后就想那我就不遍历了呗，直接输出随机一个格子随机变颜色

color[x].style.backgroundColor=colors[y];

然后xy都是随机一个数字

var x=Math.floor(Math.random()*9);

var y=Math.floor(Math.random()*4);

然后就好了，每按一次就随机变个颜色，不过由于开始把xy声明在函数外面，所以按过一次变过一次颜色后再按就不会变色了，因为此时xy对于这个函数来说是个定值了，把它写进里面就好了

btn1.onclick = function(){
var x=Math.floor(Math.random()*9);
var y=Math.floor(Math.random()*4);
color[x].style.backgroundColor=colors[y];
}

而后添加定时器

定时器是浏览器带来的功能

window.setTimeout（‘语句’，‘毫秒’）；

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

function changecolor() {
var x=Math.floor(Math.random()*9);
var y=Math.floor(Math.random()*4);
color[x].style.backgroundColor=colors[y];
setTimeout(changecolor,1000);
}

把setTimeout(changecolor,1000)

写在function里面时

当点击按钮，第一遍走函数语句，走到最后settimeout这一段时会在1000毫秒后回到var=x然后周次往复走代码，并不会有问题

function changecolor() {
var x=Math.floor(Math.random()*9);
var y=Math.floor(Math.random()*4);
color[x].style.backgroundColor=colors[y];
setInterval(changecolor,1000);
}

此时若用setinterv，当点击按钮，第一遍走函数语句，走到最后一段时会在1000毫秒后回到var=x然后周次往复走代码，但是，在这个1s间隔里会再次加多一个循环，也就是从第二遍开始会有两个changecolor（）调用，然后越往后越多就像滚雪球一样，于是看起来好像速度变快，而且x，y会有许多个函数不停的赋值，看起来就好像有好几个格子同时变化，而且颜色变化的时间加速，其实并不是这个1s变一次的速度变快了，而是在极短的时间内这段函数被特别密集的调用，我点击按钮触发事件后一根烟的功夫页面崩溃，显示网页内存不足，应该就是这个原因吧。

然后再计时器消耗大量时间，主要是计时器和清除的代码位置写着写着突然脑子就绕不过弯来了，因为开始吧setinterval写在函数外面会直接无视按钮开始变色，然后误以为一定要写在相应函数里，而后又突然想明白了，，，，