0

我正在尝试创建一个星光闪烁的动画。

function ShowStars()
{
    //if ($('img.star').length > 5)
    //  return;

    var x = Math.floor(Math.random() * gameAreaWidth) - 70;
    var y = Math.floor(Math.random() * gameAreaHeight);

    var star = document.createElement("img");
    star.setAttribute("class", "star");
    star.setAttribute("src", imagesPath + "star" + GetRandom(1, 3) + ".png");
    star.style.left = x + "px";
    star.style.top = y + "px";
    gameArea.appendChild(star);
    // Light.
    setTimeout(function () { star.setAttribute("class", "star shown"); }, 0);
    // Put out.
    setTimeout(function () { star.setAttribute("class", "star"); }, 2000);
    // Delete.
    setTimeout(function () { gameArea.removeChild(star); }, 4000);

    setTimeout(function () { ShowStars(); }, 500);
}

在我取消注释以下应该调节星数的代码之前，它工作正常：

//if ($('img.star').length > 5)
//  return;

然后它停止工作，好像创建的星星没有被移除（前 5 颗星星闪烁然后什么都没有发生）。为什么 jQuery 选择器在之后选择它们gameArea.removeChild(star);？将它们从父节点中删除还不够吗？

浏览器：谷歌浏览器 17。

问候，

4

2 回答 2

1

将注释掉的行更改为

if ($('img.star').length > 5) {
  setTimeout(function () { ShowStars(); }, 500);
  return;
}

保持 ShowStars 递归继续进行。

于 2012-06-29T06:36:48.613 回答
0

我看到了一种解决方法：不要动态创建星星，而是将它们插入 HTML（<img id="star1">... <img id="starN">，其中 N 是总数），然后点亮并熄灭现有节点。不过，我想了解，删除上述问题中的节点有什么问题。

于 2012-06-29T04:25:09.980 回答