今天完成的事情：

1、今天仔细学习了js的基本操作同时也整理了一下js任务一的思路。

以下是js任务一的思路：

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

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

③随机获得3个颜色值。

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

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

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

以下是今天在网上找到和自己写的demo：

// $(document).ready(function(){
//     //循环执行，每隔1秒钟执行一次 1000
//     var t1=window.setInterval(refreshCount, 1000);
//     function refreshCount() {
//         console.log("ready");
//     }
//     //去掉定时器的方法
//     window.clearInterval(t1);
// });
var div=Array.prototype.slice.call(document.getElementsByClassName('a'));
console.log(div)
// var num =Math.floor(Math.random()*9)
// console.log(num)



setInterval(function () {
    var box_arr=getArrItem(div,3)
    console.log(box_arr)
    for (var i=0;i<3;i++) {
        box_arr[i].style.background="#"+Math. floor(Math. random()*256). toString(10)
    }
    // div[num].style.background="#"+Math. floor(Math. random()*256). toString(10)
    // console.log( div[7].style.background)
},1000)


// 随机获取数组中任意个数的函数
function getArrItem(arr, num) {
    var temp_array = new Array();
    for (var index in arr) {
        temp_array.push(arr[index]);
    }
    var return_array = new Array();
    for (var i = 0; i < num; i++) {
        if (temp_array.length > 0) {
            var arrIndex = Math.floor(Math.random() * temp_array.length);
            //将此随机索引的对应的数组元素值复制出来
            return_array[i] = temp_array[arrIndex];
            //然后删掉此索引的数组元素,这时候temp_array变为新的数组
            temp_array.splice(arrIndex, 1);
        } else {
            break;
        }
    }
    return return_array;
}

var int;
function start(){
   //计时器
      clearInterval(int);
      int=setInterval(run,1000);
}
      function run(){
   //重置
      var box=document.getElementsByClassName('box');

      for (var i = 0; i < 9; i++) {

         box[i].style.background="orange";

      }
   //盒子
         var arr=new Array();
         for (var i = 0; i < 9; i++) {
            arr[i]=i;
            };
            arr.sort(function(){return 0.5-Math.random();}).slice(5,2);
               arr.length=3;
   //颜色
         var colors=new Array(3);
         for (var j = 0; j < colors.length; j++) {
            colors[j]="#"+(function(h){
               return new Array(7-h.length).join("0")+h
               })((Math.random()*0x1000000<<0).toString(16))
            }
   //运行
   for (var k = 0; k <3;k++) {
      box[arr[k]].style.background=colors[k];
   }
   }


//点击停止按钮
function stop(){
   clearInterval(int);
   var box=document.getElementsByClassName('box');
   for (var i = 0; i < 9; i++) {
      box[i].style.background="orange";
   }
   clearInterval(int);
}

明天计划的事情：

今天找到的几种方法都不是特别完善，明天的主要计划就是完成任务一。

遇到的问题：

今天除了在学习js相关知识喝些demo的时候遇到了点小困难以为，没有什么太难解决的问题。

收获：

关于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开始；