发表于: 2017-04-16 22:15:27
2 1218
今天做了什么:做完了js任务1
明天要做什么: 写完js任务2的页面,考虑一下任务二怎么写,是这恶写一写伪代码。
今天遇到的问题:
1.点击事件:js里面大小写比较复杂,这里应该写成onclick。
2.如果一个函数绑定在某个地方,而另一个计时器也要绑在这个地方,那么这个计时器不用非要额外绑,可以把它放在这个函数里面。
3.上面提到了一个按钮可以绑定好几个事件,这个时候只会有最后一个点击事件生效,但是可以用监听事件写,使这几个事件都生效。
4.onclick后面要加一个将要执行但是并没有执行的函数,所以函数要么不加(),要么定义一个新的函数把之前的包起来。
5.惯例占位置,加长度
var t;
var box = document.getElementsByClassName("box");
var start = document.getElementById("start").addEventListener('click',getStart);
var reset = document.getElementById("reset");
reset.onclick = getReset;
function changeOrange () {
for (var k = 0; k <= 8; k++) {
box[k].style.backgroundColor = "#ff8c00";
}
}
function getStart() {
// 清空
changeOrange ();
// 取三个盒子
console.log(box);
for (var i = 0; i <= 2; i++) {
var a = Math.floor(Math.random() * 9);
var b = Math.floor(Math.random() * 9);
var c = Math.floor(Math.random() * 9);
if (a !== b && b !== c && c !== a) {
console.log(a, b, c);
break;
}
else {
i = -1;
}
}
// 随机颜色
function getColor() {
var clr = "";
var ac = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
for (var j = 0; j <= 5; j++) {
var num = Math.floor(Math.random() * 16);
// var b = String(ac[num]);
clr += ac[num];
}
// "#" + clr;
return "#" + clr;
}
// 给盒子赋值
box[a].style.backgroundColor = getColor();
box[b].style.backgroundColor = getColor();
box[c].style.backgroundColor = getColor();
// 计时
clearTimeout(t);
t=setTimeout("getStart()",1000);
}
function getReset() {
clearTimeout(t);
}
感悟:这是一个深坑,,,走到哪都有坑,,心累
评论