[上海|结业弟子]JS-王玺|2019年11月26日的日报-技能树.IT修真院

发表于： 2019-11-26 23:11:11

1 973

今日完成任务

今天完成的工作是对任务一进行分布拆分如何实现他的工能，在任务一中要求它能够自动选取三个方块变为三种随机颜色，然后自动跳转成下一次的随机选取方块和随机选取颜色。我的思路是这样的首先让一个方块自动选取颜色。通过对方块的取随机数值

 choose_1 = parseInt(Math.random() * 9)
    console.log(choose_1)
    document.getElementsByTagName("div")[choose_1].style.backgroundColor = str ;

这里choose_1就是我们取的随机数，然后dom操作时选定这个方块就能对它赋予颜色了，str是我们的颜色变量。在这里是取的#加6位16进制数字。使用for循环让他每次在字符串的形式上加一位，达到六位的效果。

var lzp = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];

    // 遍历循环产生 6 个数
    for (var i = 0; i < 6; i++) {
      //随机产生 0~15 的个索引数,然后根据该索引找到数组中对应的值,拼接到一起
      var lut = parseInt(Math.random() * 13);
      str = str + lzp[lut];
    }

然后之里面注意一下，我随机值lut只取到了12是因为不想让我们变换的颜色和方块的颜色接近所以直接少取了一部分颜色。

这个模块写完其实就是我们会变换颜色的效果了。再给它加个延时器就能够不停的变化它的颜色了。遇到的问题是怎样让它可以重置回原来的颜色，这个问题我自己想到的方法是，再给它加一个延时器内容是让它颜色恢复成本身

function xuankuai() {
      document.getElementsByTagName("div")[choose_1].style.backgroundColor = "#FFCC00";
    }

但是这样出现了问题，就是两个延时器的时间当运行久了就会错开，导致了有的时候变换颜色效果时却变成了重置颜色的那个工能。

明天要完成的工作

明天要做事情是要把思路重新顺一下，在一开始的时候给它做一次颜色的重置执行这个延时器会不会就能成功呢？？想到这个办法后就是要实现它。

返回列表

【任务9】 [上海|结业弟子]JS-王玺 | 2019年11月26日 的日报 中品

评论

分享到

【任务9】 [上海|结业弟子]JS-王玺 | 2019年11月26日的日报中品