我如何更换旧盒子'白/没有背景?
var counter = 11;
var check = 0;
var boxes = ["box_1","box_2","box_3","box_4"];
clock = setInterval(function() {
counter--;
if(counter==0) {
clearInterval(clock);
document.getElementById("counter").innerHTML="Time Left: 0 seconds.";
} else {
var box = boxes[Math.floor(Math.random()*boxes.length)];
document.getElementById("counter").innerHTML="Time Left: " + counter.toString() + " seconds.";
document.getElementById(box).style.backgroundColor="#000";
}
}, 1000);
我尝试将该框存储为old_box
- > old_box = box
哪些无效。
似乎人们误解了。 我想存储盒子值,以便我可以在下一个循环中将其调回并将其设置为白色,而新盒子可以设置为黑色。
答案 0 :(得分:1)
你需要记住这个方框:
var counter = 11;
var check = 0;
var boxes = ["box_1","box_2","box_3","box_4"];
var lastbox = false;
clock = setInterval(function() {
counter--;
if(counter==0) {
clearInterval(clock);
document.getElementById("counter").innerHTML="Time Left: 0 seconds.";
} else {
if (lastbox) {
document.getElementById(lastbox).style.backgroundColor = "#FFF";
}
lastbox = boxes[Math.floor(Math.random()*boxes.length)];
document.getElementById("counter").innerHTML="Time Left: " + counter.toString() + " seconds.";
document.getElementById(lastbox).style.backgroundColor="#000";
}
}, 1000);
答案 1 :(得分:0)
<强> jsBin DEMO 强>
只需将背景设置为#000
到元素
哪个 索引匹配 随机数(r==i)
function $id(_) { return document.getElementById(_); }
function $el(_) { return document.querySelectorAll(_); }
function game() {
if (!c) clearInterval( clock );
$cou.innerHTML = "Time Left: "+ (c--) +" seconds.";
var r = ~~(Math.random()*n);
for(var i=0; i<n; i++) $box[i].style.backgroundColor = i==r?"#000":"#fff";
}
var $box = $el("[id^=box_]"),
$cou = $id("counter"),
n = $box.length,
c = 10,
clock = setInterval(game, 1000);
正如您所看到的,我还使用了一些不错的可重复使用的功能,因此在您的项目中,您不需要松开手指在整个地方document.getElementById
,但只需:
$id("elementID")
或者如果你想使用各种选择器获得更多元素:(慢)
$el(".elements") // [] array collection
$el("[id^=prefix]") // [] array collection
$el("input") // [] array collection