[西安|结业弟子]JS-刘思安|2020年04月18日的日报-技能树.IT修真院

发表于： 2020-04-18 22:30:44

1 1262

今日完成

完成task1

明日计划

着手task2

遇到的问题

完成一此三个格子颜色赋值后要多次才能清除已赋值的颜色

原因

每次选择三个格子后，收纳格子索引的数组未清零导致数组元素大于三个

问题

颜色累加

解决办法

完成修改颜色之前，进行一次颜色初始化

方法一

通过遍历数组无差别清除

var box = document.getElementsByClassName("box");
for (var k = 0; k < box.length; k++) {
  box[k].style.backgroundColor = "rgb(255, 165, 0)";
}

方法二

仅清除修改过的格子

代码如下

// 获取格子dom节点
var box = document.getElementsByClassName("box");
// 创建判断格子是否重复的数组
var boxArr = [];
// 创建判断颜色是否重复的数组
var colorArr = [];
// 计时器
var interval;

// 选择性还原已经被改变的颜色
function cancelColor() {
  // 每次执行前先还原默认颜色
  for (var j = 0; j < boxArr.length; j++) {
    box[boxArr[j]].style.backgroundColor = "rgb(255, 165, 0)";
  }
  //生成新颜色前，清除之前生成的颜色后，清除数组，归零计数器
  boxArr = [];
  colorArr = [];
  j = 0;
}
function changeColor() {
  // 随机产生一个颜色
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  var rgb = "rgb" + "(" + r + "," + g + "," + b + ")";
}

function change() {
  cancelColor();
  // 选取三个格子并修改颜色
  for (var i = 0; i < 3; i++) {
    // 随机选取一个格子
    var num = Math.floor(Math.random() * 9);
    // 数组比对是否重复
    if (boxArr.indexOf(num) < 0) {
      // 不重复 数值加入数组
      boxArr.push(num);
      for (var j = 0; j < 3; j++) {
        // 随机产生一个颜色
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var rgb = "rgb" + "(" + r + "," + g + "," + b + ")";
        // 数组比对是否重复
        if (colorArr.indexOf(rgb) < 0) {
          // 未重复 加入数组
          colorArr.push(rgb);
          // 颜色赋值
          box[num].style.backgroundColor = rgb;
        } else {
          // 重复 重新获取颜色
          j--;
        }
      }
    } else {
      // 重复 重新获取随机数
      i--;
    }
  }
}

function start() {
  // 执行前清除定时器，防止多次点击加快计时器
  clearInterval(interval);
  interval = setInterval("change()", 1000);
}
function stop() {
  clearInterval(interval);
  cancelColor();
}