使用计时器将 parent child 图片移动 1px

Question

我正在尝试重建 Space 入侵者。但仅在 Javascript 中没有 jQuery 等。现在我为火箭队打造了一个“家”：

var image = document.createElement('img');
image.setAttribute('src', 'Rakete.gif');
image.setAttribute("style",
  "position:absolute; left:" + x2 + "px; top:bottom; bottom:55px;");

我用这个将它添加到正文中：

document.body.appendChild(image);

现在我的问题是：如何将每秒 bottom:55px; 替换为 +1px？

我把这一切都放在一个带有计时器的函数中。我的问题只是我不知道如何替换 every child 的 bottom。我需要为每个 child.

增加 bottom

Answer 1

首先为所有此类图像设置 class 更容易:

image.setAttribute("class", "rocket");

您的计时器需要如下所示：

var rockets = document.getElementsByClassName("rocket"); // Gets all elements with class “rocket”
setInterval(function(){
  var maximumHeight = window.innerHeight; // maximum value for bottom before element gets removed
  for(var i = 0; i < rockets.length; i++){ // Now, iterate over every element with class “rocket” with a for loop
    rockets[i].style.bottom = (Number( // Convert the following into a number
      rockets[i] // the element
        .style // its CSS data
        .bottom // the bottom property
        .match(/[\+\-]?(?:\d*\.?\d+)/) // the number part of it (in any format)
    ) + 1) // increment!
    + "px"; // plus the string 'px'
    if(Number(rockets[i].style.bottom.match(/[\+\-]?(?:\d*\.?\d+)/)) > maximumHeight){
      // If maximum height is exceeded
      rockets[i].remove(); // Remove that child
    }
  }
},
1000); // 1000ms = 1s

或总结：

var rockets = document.getElementsByClassName("rocket");
setInterval(function(){
  var maximumHeight = window.innerHeight;
  for(var i = 0; i < rockets.length; i++){
    rockets[i].style.bottom =
      (Number(rockets[i].style.bottom.match(/[\+\-]?(?:\d*\.?\d+)/)) + 1) + "px";
    if(Number(rockets[i].style.bottom.match(/[\+\-]?(?:\d*\.?\d+)/)) > maximumHeight){
      rockets[i].remove();
    }
  }
}, 1000);

这只是每秒操作 CSS 数据。

只有一件事需要注意：....match(/…/) 将 return 一个 Array 如果找到一个数字或 null 如果没有找到（例如，如果 bottom 属性尚未设置并且为空或无效）。这对 Number() 无关紧要！ Number(['42']) 仍然 return 数字 42 和 Number(null) 安全 returns 0.

如果您确实有自己的后备号码（例如），您可以使用 || OR 运算符：

rockets[i].style.bottom =
  (Number(rockets[i].style.bottom.match(/[\+\-]?(?:\d*\.?\d+)/) || 55) + 1) + "px";

ECMAScript 2015+ 方法

const rockets = document.getElementsByClassName("rocket"),
  numberPattern = /[\+\-]?(?:\d*\.?\d+)/;

setInterval(() => {
  const maximumHeight = window.innerHeight;

  Array.from(rockets).forEach((rocket) => {
    rocket.style.bottom = (Number(elem.style.bottom.match(numberPattern)) + 1) + "px";

    if(Number(rocket.style.bottom.match(numberPattern)) > maximumHeight){
      rocket.remove();
    }
  });
}, 1000);

使用计时器将 parent child 图片移动 1px

Move parent child picture by 1px with a timer

javascript

replace

image

timer

increment

ECMAScript 2015+ 方法