如何爲多個div設置一個間隔？

Question

有一個DIV的例子。但現在我需要更多的蝙蝠。我如何使所有bats = getElementsByClassName（「蝙蝠」）1 setInterval？

var bat = document.getElementByID("bat"); 
function batAnimation(bat) { 
    var frame = Math.floor(Math.random() * 4) + 1; 
    switch (frame) { 
    case 1: 
     bat.style.backgroundPositionX=0; 
     break; 
    case 2: 
     bat.style.backgroundPositionX=10; 
     break; 
    case 3: 
     bat.style.backgroundPositionX=20; 
     break; 
    case 4: 
     bat.style.backgroundPositionX=30; 
     break; 
    } 
} 
setInterval(batAnimation, 50); 

Answer 1

試試這個：

var bats = document.getElementsByClassName("bat"); 
    function batAnimation(bat) { 
     var frame = Math.floor(Math.random() * 4) + 1; 
     for(var i=0; i< bats.length;i++){ 
     bats[i].style.backgroundPositionX=(frame-1)*10; 
     } 
    } 
    setInterval(batAnimation, 50); 

說明：這裏蝙蝠是所有的div元素的數組，我就用一個for循環和分配backgroundPositionX每個穿越。

作爲getElementsByClassName方法並不適用於所有的browers工作，所以添加的功能，如果沒有可用的

if(!document.getElementsByClassName){ 
document.getElementsByClassName(clasName){ 
    var parent = document; 
    var elements = parent.getElementsByTagName('*'); 
    var matching = []; 
    for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){ 
    if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) { 
     matching.push(elements[i]); 
    } 
    } 
    return matching; 
} 
}