用javascript中的数组循环css div答案

【问题标题】：Cycle css div left with an array in javascript用javascript中的数组循环css div
【发布时间】：2014-04-11 18:36:53
【问题描述】：

这段代码直接到数组的最后一个位置，我想要的是迭代或循环遍历它们，然后在最后一个位置转到数组的第一个位置。我尝试了其他方法，但它给了我在 Firefox 中留下的错误解析。这是代码小提琴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 中收到此错误：解析“左”的值时出错。声明已删除。

【问题讨论】：

你想用这个做什么？它只运行一次.. 那么你用这个数组做什么.. 你应该使用某种计时器吗？
动画，也许一个for循环是必要的，但即使这样我也无法得到结果。
尝试计时事件w3schools.com/js/js_timing.asp

标签： javascript css arrays html iteration

【解决方案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/

【讨论】：

【解决方案2】：

试试这个：

function sleep(millis, callback) {
    setTimeout(function()
            { callback(); }
    , millis);
}

var times = ["2px","20px","20px","12px","20px","2000px","20px"];
var move=times;     
var i=0;

(function foobar_cont(){
        if(i == move.length-1) {i=0;}
        else {i=i+1;};
        document.getElementById("placeDiv").style.left=move[i];
        sleep(1000, foobar_cont);
})();

Demo

【讨论】：

【解决方案3】：

我采用了 dfsq 的原始答案，并为其添加了一些趣味：

$(div).animate({left: times[move++ % times.length]}, 500);

Demo

【讨论】：

【解决方案4】：

您的代码中有语法错误...Link。它对我来说效果很好，但是..“时间”或过渡对用户来说是不可见的..导致它很快。 :)

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

【讨论】：

有多快？如果可以用几个像素的 div 做高清？换句话说，一个 2d for 循环具有 768 个 div 的行和 1024 个 div 的列。