javascript - 如何每秒创建整个页面的随机图像散布？(How to create a random scatter of images throughout the page every second?)

Question

I need to create a website with infinite elements for a project.

(我需要为项目创建一个包含无限元素的网站。)

I want to use the element of SpongeBob, and the fact that every second, 2 people die and 4 people are born.

(我想使用海绵宝宝的元素，以及每秒钟有2个人死亡和4个人出生的事实。)

So I set the background to be Bikini Bottom, and every second I want 4 characters to pop up and 2 characters to disappear, without end and randomly.

(因此，我将背景设置为“比基尼泳裤”，每秒钟我要弹出4个字符，消失2个字符，没有结束且随机。)

Is there a way I can do this in JavaScript?

(有没有办法可以用JavaScript做到这一点？)

If so, how do I set that code up?

(如果是这样，如何设置该代码？)

  ask by PSG translate from so

Answer 1

I think there are different approuches to achieve something like that, this is what I would do.

(我认为有不同的方法可以实现这样的目标，这就是我要做的。)

function deleteImage() {
        const imagesAlreadyOnScreen = document.getElementsByClassName("images"); // give all your images a class so you can get them here.

        //to delete a random image you would need a random number between 0 (included) and the amount of all images.
        const indexToRemove = Math.floor(Math.random() * imagesAlreadyOnScreen.length);

        //or use anther method to remove this element
        imagesAlreadyOnScreen[indexToRemove].remove();
    }

    const parentElement = document.getElementById("parentElement"); // get the container where you want to put your images in.

    function addImage() {
        //create img element
        const img = document.createElement("img");

        //set all your attributes like width, height, ... here with img.setAttribute(attribute, value);

        img.setAttribute('src', 'imageLink'); //here imageLink is the location of your image.

        parentElement.appendChild(img) // add the image to the container
    }

//use window.setInterval to execute these functions after a certain amount of time is reached.

window.setInterval(deleteImage, 500); // the second argument is in milliseconds, remove one image every half a second
window.setInterval(addImage, 250);

This would be my approach, please read some tutorials and so on to have a basic understanding of JS, good luck!

(这将是我的方法，请阅读一些教程等等，以便对JS有基本的了解，祝您好运！)

I think w3schools is a good place to start.

(我认为w3schools是一个不错的起点。)

https://www.w3schools.com/js/default.asp

(https://www.w3schools.com/js/default.asp)

Also note that the code should be in try catch blocks but this is beyond the scope of the question.

(另请注意，代码应放在try catch块中，但这超出了问题的范围。)