[散修弟子]JS-377|2016年09月15日的日报-技能树.IT修真院

发表于： 2016-09-15 22:31:23

5 1875

今天完成的事情	1、task1中JS部分的代码
	var gridColor = 0;
	function discolor(){
	var color;
	var colorNum;
	var colorName;
	var grid9 = document.getElementsByClassName("grid");
	var gridNum;
	colorNum = Math.floor(Math.random() * 3); //colorNum随机0~2
	gridNum = Math.floor(Math.random() * 9);
	switch(colorNum){
	case 0:
	color = "red";
	colorName = "红色";
	break;
	case 1:
	color = "green";
	colorName = "绿色";
	break;
	case 2:
	color = "blue";
	colorName = "蓝色";
	break;
	}
	grid9[gridColor].style.backgroundColor = "orange";
	gridColor = gridNum;
	grid9[gridNum].style.backgroundColor = color;
	console.log("格子" + (gridNum + 1) + "变成了" + colorName);
	}
	setInterval(discolor,1000);

	2、学习了dom事件，看不太懂。

明天计划的事情

继续3刷JS知识点，并尝试完成task2。

遇到的问题	1、昨天的setInterval("discolor()",1000);的问题，查了下基础资料得知
	还有一个写法是setInterval(discolor,1000);没有双引号则不需要括号。唉，我看了2遍都忘了。
	2、（1）grid9[gridColor].style.backgroundColor = "orange";
	（2）gridColor = gridNum; //一开始没有理解这句话的作用。
	（3）grid9[gridNum].style.backgroundColor = color;
	先执行（1）变为橙色，再赋值（2），在执行（3）实现变色。测试，当orange改为black，浏览器会出现第一个格子变成黑色（因为gridColor初始赋值为0，即第一个格子），接着随机一个格子变成红/绿/蓝，执行中止。接着又循环执行（1）（2）（3）。
	给gridColor = gridNum;的作用就是使gridNum随机0~8变化时，gridColor也跟着变化。
	当gridNum=3，（3）变成grid9[3]变色，gridColor也随即变成=3，在第二次执行时（1）也变成grid9[3]，从而格子[3]变回橙色。
	3、从第3个关系中得出，js代码严格执行从上往下，代码顺序的错误是致命的。

收获	回顾了一下CSS和HTML，感觉布局想法很重要，一样的代码，一番奇思妙想，效果截然不同。
	今天早点睡了，累趴。

返回列表