javascript - 如何为多个 div 设置一个间隔？

Question

有一个 DIV 的示例。但现在我需要更多的蝙蝠。如何为所有 bats=getElementsByClassName("bat") 设置 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);

说明：这里 bats 是所有 div 元素的数组，我使用 for 循环遍历它并将 backgroundPositionX 分配给每个元素。

由于 getElementsByClassName 不适用于所有浏览器，因此如果不可用，请添加该功能

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