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

如何为几个div设置一个间隔？

1 个答案: