javascript - 循环 css div 在 javascript 中留下一个数组

Question

这段代码直接转到数组的最后一个位置，我想要的是遍历或循环遍历它们，然后在最后一个位置转到数组的第一个位置。我尝试了其他方法，但它给了我在 Firefox 中留下的错误解析。这是代码 fiddle Demo .

正文:

 <div id="placeDiv">ok</div>
 <script>
    var times = ["2px","2000px","200px","12px","20px","200px","2000px"];
    var move=times;             
    var i=0;
    if(i == move.length-1) 
    {i=0;}
    else
    {i=i+1;};
    document.getElementById("placeDiv").style.left=move[i];
 </script>

CSS:

<style>#placeDiv{position:absolute;top:0px;width:100px;height:100px;background-color:purple}</style>

此代码无效:

    var times = [];
    for (var i = 0; i < 30000; i++) {
        times.push("\""+i+"px\"");
 }   var move=times;             
         if(i == move.length-1) 
     {i=0;}
     else
     {i=i+1;};
document.getElementById("placeDiv").style.left=move[i];

使用上面的代码，我在 firefox 中得到了这个错误: 解析“左”的值时出错。声明已删除。

Answer 1

你需要在这里使用setTimeout。例如:

var times = ["2px", "20px", "30px", "12px", "20px", "200px", "20px"],
    move = 0,
    div = document.getElementById("placeDiv");

setTimeout(function next() {
    div.style.left = times[move++ % times.length];
    setTimeout(next, 1000)
}, 1000);

要循环数组值，使用 % 运算符非常有用。

演示:http://jsfiddle.net/m6w6K/1/

或者使用setInterval:

function makeMove() {
    div.style.left = times[move++ % times.length];
}

setInterval(makeMove, 1000);

演示:http://jsfiddle.net/m6w6K/4/