以间隔存储随机数组值

时间:2014-05-08 14:04:58

标签: javascript

我如何更换旧盒子'白/没有背景?

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哪些无效。

似乎人们误解了。 我想存储盒子值,以便我可以在下一个循环中将其调回并将其设置为白色,而新盒子可以设置为黑色。

2 个答案:

答案 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