发表于: 2017-04-15 23:46:41

2 610


今天做了的事: 任务一完成了一半,成功的取出三个盒子,然后又把盒子加上了三个不同的颜色。只要再加上一个定时或延迟执行的函数就可以完结了。


明天要做的事:完成任务一。然后再看一看书,感觉也是用的很水。然后再试着写一写任务二。


今天遇到的问题:刚开始各种不会写,书里面的东西根本用不来。然后在成都之花以及老哥@左少华还有我最亲最爱的大师兄的教导下,我渐渐明白了昨天所看的书里面的知识是怎么联系起来用的。


1.首先是通过getElenentByClassName,取到9个盒子,作为“对象",然后通过random()取随机数,通过


for (var i=0i<=2i++) {

控制循环三次,即取出三个数,然后使用if else判断,如果两两不等,跳出循环;否则继续,并给i设为-1。为什么设为-1这里@成都之花提出如果不赋值是会多出1,所以要设为-1。


2.然后是取颜色,自定义一个数组(0~9,a~f),一共16个数。然后还是通过random()取随机数,通过随机数在数组里取出相对应的字符串,并加和。循环6次,会出现一个长度为6的字符串,然后前面添一个#,就形成了颜色。定义一个函数,并返回值,赋给box就可以实现三个颜色的盒子了。


2.关于定义变量:变量定义在函数内部就是局部变量,外部就是全局变量。局部变量是没法被赋值给外部的。但是可以通过返回值的方式给外部赋值。


3.之前变量都定义成了全局变量,导致函数每一次返回值都会给全局变量赋值,每执行一次函数字符串就会边长,导致出现6的整数倍的字符串,没法形成颜色,解决办法是定义成菊部变量。


4.金超师兄帮我修改了代码里面墨迹无用的部分,变得好看多了。


5.此处贴一下为了显得日报多一点


// 取三个盒子
var box = document.getElementsByClassName("box");
console.log(box);
for (var i=0; i<=2; i++) {
   var a = Math.floor(Math.random()*9);
   var b = Math.floor(Math.random()*9);
   var c = Math.floor(Math.random()*9);
   if (a!==b && b!==c && c!==a) {
       console.log(a,b,c);
       break;
   }
   else {
       i=-1;
   }
}
// 随机颜色
function getColor() {
   var clr = "";
   var ac = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
   for (var j = 0; j <= 5; j++) {
       var num = Math.floor(Math.random() * 16);
       // var b = String(ac[num]);
       clr += ac[num];
   }
   // "#" + clr;
   return "#" + clr;
}
box[a].style.backgroundColor = getColor();
box[b].style.backgroundColor = getColor();
box[c].style.backgroundColor = getColor();


感悟:真是滑稽!



返回列表 返回列表
评论

    分享到