发表于: 2019-01-15 21:45:19

1 736



今天完成的事情:

首先说下这个任务的思路吧:

①获取九宫格中的九个小格子DOM。

②随机取得小格子中的3个格子。

③随机获得3个颜色值。

④将随机出来的颜色值分别添加到3个格子的样式上。

⑤将以上几步操作放到一个定时器中并给一个按钮添加点击事件,执行此函数。

⑥给另一个添加取消此函数的事件。


2、今天完成了js任务一,也算是终于找到了一些门路吧,在这期间经历了很多同时也学到了很多,js确实是有难度,不过还是要努力攻克吧。


3、以下是js任务一的js代码:

var flag = true;
var timer;
function choiceCube(){
var array1 = [];
   for(var i = 0; i < 9; i++){
array1[i] = i ;
   }
var array2 = [];
   for(var i = 9; i > 0;){
var randomNumber = Math.floor(Math.random() * i);
       array2.push(array1[randomNumber]);
       array1[randomNumber] = array1[--i];
   }
var cube1 = array2[0];
   var cube2 = array2[1];
   var cube3 = array2[3];
   function getColor() {
var r = Math.floor(Math.random() * 256);
       var g = Math.floor(Math.random() * 256);
       var b = Math.floor(Math.random() * 256);
       return "rgb(" + r + "," + g + "," + b + ")";
   }
var x = document.getElementsByClassName("cube");
   x[cube1].style.backgroundColor = getColor();
   x[cube2].style.backgroundColor = getColor();
   x[cube3].style.backgroundColor = getColor();
}
function resetColor() {
var x = document.getElementsByClassName("cube");
   for(i = 0; i < 9; i++){
x[i].style.backgroundColor = "#fea500";
   }
}
function loopBlink() {
setTimeout("choiceCube()",0);
   setTimeout("resetColor()",1000);
}
function startBlink() {
if (flag){
timer = setInterval("loopBlink()",1000);
       flag = false;
   }
}
function stopBlink() {
clearInterval(timer);
   flag = true;
}


明天计划的事情:

1、今天发现了一个小bug,明天会针对该bug做出修改。

2、明天计划开始着手js2-4,并争取在一个月之内完成js任务。


遇到的问题:

1、在随机选取三个格子后清除上一轮的随机颜色的操作室遇到了瓶颈,查阅了很多相关资料,最后通过一一尝试,和写demo对比出了相对合理的方案。


收获:

1、关于js中两种定时器的设置及清除

1、JS中的定时器有两种:

window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法[function],当方法执行完成定时器停止(但是定时器还在,只不过没用了);

window.setInterval([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法[function],当方法执行完成,定时器并没有停止,以后每隔[interval]这么长的时间都会重新的执行对应的方法[function],直到我们手动清除定时器为止;

2、JS中的定时器是有返回值的:->返回值是一个数字,代表当前是第几个定时器

  var timer1=window.setTimeout(function(){},1000);  //timer1->1 当前是第一个定时器
   var timer2=window.setTimeout(function(){},1000);  //timer2->2 当前是第二个定时器
   window.clearTimeout(timer1); //->把第一个定时器清除掉,这里也可以用window.clearInterval(timer1)、window.clearTimeout(1)、window.clearInterval(timer1);
  var timer3=window.setTimeout(function(){},1000);   //timer3->3 当前是第三个定时器 ,虽然上面的定时器timer1清除掉了,但是号还是继续往后排的;


清除定时器:

window.clearInterval(timer1)/window.clearTimeout(time1);两种清除方式都可以清除通过setTimeout和setInterval设置的定时器(两种方式在设置定时器的时候有区别,清除定时器的时候没有区别),并且参数不仅可以是timer,还可以是其返回值,例如1,2;需要注意的是,定时器即使清除了,其返回值也不会清除,之后设置的定时器的返回值也会在其返回值的基础上继续向后排,这点类似于银行的排队领号,即使1号的业务办理完了,后边的人仍是从2号开始继续领号,而不是重新从1开始;





返回列表 返回列表
评论

    分享到