发表于： 2020-05-26 22:51:35
1 2214
今天完成的事情：JS1的bug修改
明天计划的事情：继续后续的任务
遇到的问题：实际测试还是太少，后续改bug很费时间
收获：今天的修改内容
var box = document.getElementsByTagName('div')
//获取随机颜色
function color_select() {
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 + ')';
return rgb;
}
//随机上色并查重
function num_select() {
var num1 = Math.floor(Math.random() * box.length);//范围内取数字
var num2 = Math.floor(Math.random() * box.length);
var num3 = Math.floor(Math.random() * box.length);
if (num1 != num2 && num2 != num3 && num1 != num3) {
box[num1].style.background = color_select();
box[num2].style.background = color_select();
box[num3].style.background = color_select();
} else {//有重复
num_select()
}
}
//清除颜色
function color_reset() {
for (var i = 0; i < box.length; i++) {
box[i].style.background = "#ffa600";
}
}
//绑定开始计时变色
var x = null;
function color_start() {
clearInterval(x);
color_reset();
x = setInterval(function () {
color_reset();
num_select();
}, 1000);
}
//绑定停止计时器并清除颜色
function color_stop() {
clearInterval(x);
color_reset();
}
运行效果
点击开始之后可以正常闪烁
但是之前有一个问题，只要一直点开始闪烁就会越来越快
今天修改了这一部分的代码
var x = null;
function color_start() {
clearInterval(x);
color_reset();
x = setInterval(function () {
color_reset();
num_select();
}, 1000);
}
在点击开始之后每次都先停止再重新闪烁
clearInterval(x);
需要提前设置全局变量var x = null;
为了美观也清楚一次颜色
color_reset();
这样整体看起来就好多了
if (num1 != num2 && num2 != num3 && num1 != num3) {
box[num1].style.background = color_select();
box[num2].style.background = color_select();
box[num3].style.background = color_select();
} else {//有重复
num_select()
}
这一部分来进行查重，只要取出来的数字有重复就再取一次
function color_select() {
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 + ')';
return rgb;
}
用取随机数的形式取随机颜色
剩下的明天再继续
返回列表
评论