今天完成的事情：任务一样式完成。DOM选中元素，设定随机色与三个随机格子。使开始和结束按钮都绑定上所有格子元素。
var li = document.getElementsByTagName('li'), //获取所有标签 "li" 的DOM节点
start = document.getElementById('btn-start'),//选中开始按钮ID
stop = document.getElementById('btn-stop');//选中结束按钮ID
明天计划的事情：深度思考；语法记忆；需要牢记的语法。
遇到的问题：对于JS的学习还是有些没有头绪，很迷。设定随机颜色时，设定了不让它们三个相同，但不知道怎么设定让他们三个不与默认颜色相同。
if (clrone !== clrtwo && clrtwo !== clrthree && clrthree !== clrone) {//排除相同颜色值
console.log(clrone, clrtwo, clrthree);//颜色值控制台
li[one].style.backgroundColor = clrone;//将三个随机颜色值与三个随机数的格子合并
li[two].style.backgroundColor = clrtwo;
li[three].style.backgroundColor = clrthree;
}
else {
getli();//若三个颜色值相同，则从新进行新的一轮
}
收获：（任务一的思路：
frist，使用DOM 选中HTML内元素,并给它们赋予变量值：
document.getElementsByTagName（） //选中所有同标签的元素；
document.getElementById() //选中某元素的ID；
stop = document.getElementByClassName() //选中某元素的类名;
随机颜色值筛选；
循环函数介入颜色变换：
每一轮循环开始，所有格子颜色都恢复默认颜色；
随机选取三个格子并赋予颜色值：
进行三个格子随机数值的判定（不重复），
if： 当三个格子他们的数值都不重复，及继续循环；
else: 反之他们内若有重复，则从新循环并判定；
进行三个格子的颜色值的判定（不重复）同上，
if： 当三个格子的颜色值不重复，继续循环；
else： 反之，若有重复出现进行新的一轮循环；
将三个随机的格子的数值与它的颜色合并。
开始与结束按钮的函数添加：
开始按钮变量，每轮循环设定时间。再次点击消除计时，从新开始新的一轮；
结束按钮变量，消除计时，所有格子恢复初始颜色。）
随机获取三个格子并判定使他们的数值不相等：并进三个格子的颜色判定使他们颜色值也不相同。
function getli() {//随机选取三个格子并变色
for (var i = 0; i < 9; i++) {//每新的一轮随机变色刷新
li[i].style.backgroundColor = "orange"
}
var one = Math.floor(Math.random() * 9),//随机数生成三个数
two = Math.floor(Math.random() * 9),
three = Math.floor(Math.random() * 9);
if (one !== two && two !== three && three !== one) {//排除相同随机数
console.log(one, two, three);//格子数值控制台
var clrone = color(),//随机取三个颜色值
clrtwo = color(),
clrthree = color();
if (clrone !== clrtwo && clrtwo !== clrthree && clrthree !== clrone) {//排除相同颜色值
console.log(clrone, clrtwo, clrthree);//颜色值控制台
li[one].style.backgroundColor = clrone;//将三个随机颜色值与三个随机数的格子合并
li[two].style.backgroundColor = clrtwo;
li[three].style.backgroundColor = clrthree;
}
else {
getli();//若三个颜色值相同，则从新进行新的一轮
}
}
else {
getli();//若三个格子的数值相同，则进行新的一轮
}
};
返回列表
评论