我正在尝试创建一个网站，该网站每秒钟都会在页面的随机位置上显示四张图片，然后两张图片随后消失。因此，四张图像将在半秒内出现，而两张图像将在半秒内消失，使其执行一秒钟。
我正在尝试以视觉方式表示四个人的出生，两个人在地球上每秒逝世。我正在使用一个名为“ sunflower.png”的图像来执行此操作。
我的朋友建议我以这样的方式开始我的代码，但是我无法使其正常工作。相反，我的图片会弹出一秒钟，然后图像错误图标将继续重复出现。我究竟做错了什么？谢谢。
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.sunflower {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="maincontainer">
<img class="sunflower" src="images/sunflower.png" alt="Sunflower">
</div>
<script>
function deleteImage() {
const imagesAlreadyOnScreen = document.getElementsByClassName("sunflower");
const indexToRemove = Math.floor(Math.random() * imagesAlreadyOnScreen.length);
imagesAlreadyOnScreen[indexToRemove].remove();
}
const parentElement = document.getElementById("maincontainer");
function addImage() {
const img = document.createElement("img");
img.setAttribute('src', 'imageLink');
parentElement.appendChild(img)
}
window.setInterval(deleteImage, 500);
window.setInterval(addImage, 250);
</script>
</body>
</html>事物与要添加的图像的结合：
a）src属性需要设置为'images / sunflower.png'-这将防止图像损坏的问题
b）它需要一类“向日葵”，以便显示在您的可删除图像列表中
function addImage() {
const img = document.createElement("img");
img.setAttribute('src', 'images/sunflower.png');
img.classList.add('sunflower');
parentElement.appendChild(img)
}
首先，我们需要某种网格，这样我们就不会在另一个人的图片上显示一个人的图片。我创建了一个示例10x10网格，其中包含100px x 100px的图像。
我已经为Person对象创建了一个Class，它将根据出生和死亡间隔来创建和删除。
根据可用网格位置的数量，我初始化了一个100个元素的数组（最大人数），范围从0到99。
设置了出生间隔，并且每500ms出生4个新的人物（对象）。
然后，在1000毫秒后，死亡间隔开始，有2人死亡。
当然，这只是一个入门示例代码。您可以完全删除Grid逻辑，并仅在父元素上使用随机的x，y位置。
您也可以注释掉转换CSS规则以查看完整尺寸的网格。
// All the positions that the grid can hold: 0-99
const grid = [...Array(100)].map(( _, idx ) => idx);
// Get a random position (0-99) from the grid Array:
function getRandomPos(){
return grid.splice( Math.floor( Math.random() * grid.length -1 ), 1 )[0];
}
// Get the x and y grid coordinates from the random position:
function getXYfromPos( randomPos ){
const x = randomPos % 10;
const y = Math.floor( randomPos / 10 );
return { x, y }
}
// Get a random person (that will die) from the people array, which holds all currently living persons:
function getRandomPerson(){
return people[ Math.floor( Math.random() * people.length - 1 ) ];
}
// A URL to display random images:
const URL = [ "https://picsum.photos/id", "100/100" ];
// A counter to be incremented, so that every time a new person is created, we get a new image:
let counter = 0;
// The array that will be holding the people that are born:
const people = [];
class Person {
constructor(){
this.img = document.createElement("img");
this.img.setAttribute( "src", `${URL[0]}/${++counter}/${URL[1]}` );
this.randomPos = getRandomPos();
const xy = getXYfromPos( this.randomPos )
this.x = xy.x;
this.y = xy.y;
this.img.style.left = ( this.x * 100 )+ 'px';
this.img.style.top = ( this.y * 100 ) + 'px';
document.querySelector("#content").appendChild( this.img );
people.push( this );
}
remove(){
this.img.remove();
grid.push(this.randomPos);
people.splice( people.indexOf( this ), 1 );
}
}
let birthInterval;
let deathInterval;
function start(){
birthInterval = setInterval(function(){
new Person();
new Person();
new Person();
new Person();
// console.log( "4 people are born :)" );
if ( !deathInterval ){
deathInterval = setInterval(function(){
const randomPerson1 = getRandomPerson();
randomPerson1 && randomPerson1.remove();
const randomPerson2 = getRandomPerson();
randomPerson2 && randomPerson2.remove();
// console.log( "2 people die :(" );
}, 500 );
}
}, 500 );
}
document.querySelector("#start").onclick = start;
document.querySelector("#stop").onclick = function(){
clearInterval( birthInterval );
clearInterval( deathInterval );
}* { box-sizing: border-box; }
img {
display: inline-block;
position: absolute;
}
body {
margin: 0;
padding: 0;
background: black;
}
#content{
border: 1px solid white;
margin: 0 auto;
width: 1000px;
height: 1000px;
position: relative;
top: 0;
left: 0;
background-image:
linear-gradient( 0deg, white 0%, white 1%, transparent 2%, transparent),
linear-gradient( 90deg, white 0%, white 1%, transparent 2%, transparent);
background-size:100px 100px;
transform: scale(0.6) translateY(-200px);
}<button id="start">Start</button><button id="stop">Stop</button>
<div id="content"></div>