我想无限重复功能，但我做不到

Question

我想对我的背景做一些影响，所以我想我可以添加一些形状飞来飞去，但我只做 1 个形状，我不能循环或任何东西

我多次尝试调用函数，但没有帮助

function animasyon(a) {
    window.onload=function(){

        var id = setInterval(anim,5);

        $('body').append('<div class=shape></div>');
        $('body').append('<div class=shape></div>');

        var kutu = document.getElementsByClassName("shape");
        var pos = 0;
        var x = window.innerWidth;
        var y = window.innerHeight;
        var borderSize = Math.floor(Math.random() * 3 ) + 1;
        var ySize = Math.floor(Math.random() * y ) + 1;
        var Size = Math.floor(Math.random() * 30 ) + 5;
        var yon = Math.floor(Math.random() *2)+1;
        var dolu = Math.floor(Math.random() *2)+1;
        if (ySize > 50) { ySize-=20; }


            function anim(){

                if (pos == x) {
                    clearInterval(id);          
                    document.getElementById("shape").remove();
                }else{
                    pos++;
                    kutu[a].style.position = "absolute";
                    kutu[a].style.border = "solid rgb(119,38,53) "+borderSize+"px";
                    kutu[a].style.left = pos+"px";
                    kutu[a].style.width = Size+"px";
                    kutu[a].style.height = Size+"px";

                    if (yon == 1) { ySize-=0.2; } else { ySize+=0.2; }
                    if (dolu==1) {kutu[a].style.background = "rgb(119,38,53)";}
                    if (kutu[a].offsetTop < 0 || kutu[a].offsetTop > y-30) {document.getElementById("shape").remove();}

                    kutu[a].style.top = ySize+"px";
                }
             }
    }

}

animasyon(0);

Answer 1

试试用这种方式调用'anim'函数

setInterval(function(){anim()},5);

Answer 2

您的问题是您在 function animasyon

中为 window.onload 函数分配了一个值

window.onload 仅包含 1 个函数。如果多次调用动画函数，最后一个会覆盖第一个。

编辑：您需要将动画逻辑与页面加载逻辑分开。它们是完全不同的东西。

这是一个添加多个对象并分别为每个对象设置动画的示例。

// HTML
<div id="container">
  <div id="ball"></div>
  <div id="ball2"></div>
  <div id="ball3"></div>
  <div id="ball4"></div>
</div>
// CSS
#ball, #ball2, #ball3, #ball4 {
  background: red;
  border: 1px solid #FAFDFA;
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 2em;
  position: absolute;
}

#ball2 {
  background: blue;
}

#ball3 {
  background: green;
}

#ball4 {
  background: purple;
}

#container {
  width: 512px;
  height: 512px;
  background: black;
  position: relative;
}
// JS
const container = document.getElementById('container');
const stageWidth = 512;
const stageHeight = 512;
const makeFall = (elementId) => {
    // this function makes an enlement fall in random direction
  const animationSpeed = 4;
  // your onload function
  const ball = document.getElementById(elementId);
  let directionX = (Math.random() * animationSpeed * 2) - animationSpeed;
  let directionY = Math.random() * animationSpeed;
  const setRandomStart = () => {
    ball.style.top = '10px';
    ball.style.left = (Math.random() * (stageWidth / 2)) + 'px';
    directionX = (Math.random() * animationSpeed * 2) - animationSpeed;
    directionY = Math.random() * animationSpeed;
  }
  setRandomStart();
  let animationInterval = setInterval(() => {
    let px = parseFloat(ball.style.left);
    let py = parseFloat(ball.style.top);
    px += directionX;
    py += directionY;
    if (px > stageWidth - 20 || py > stageHeight    - 20 || px < -20) {
      setRandomStart();
    } else {
      ball.style.left = px + 'px';
      ball.style.top = py + 'px';
    }


  }, 48);
}

// In Your onload function you can add the elements and then animate


makeFall('ball');
makeFall('ball2');
makeFall('ball3');
makeFall('ball4');

https://jsfiddle.net/753oL8re/4/