HTML-javascript中的一个一个随机图像生成器-堆栈溢出

顺晟科技

2022-10-19 13:10:16

246

我正在学习JavaScript，我想做这个练习，在这个练习中，我想一个接一个地生成和显示随机图像，间隔为1秒，一行中有4个图像，总共有3行和12个图像，一旦这个循环完成，它必须用不同的图像序列再次重复下面是我编写的代码，但它一次生成所有图像

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Image Generator</title>
    <script src="main.js"></script>
</head>
<body onload="imageTimeOut();" style="max-width: 400px;">
<h2 style="color: blue">Random Image Generator</h2>
<br>
<span id="result"> </span>   
</body>  
</html>

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Image Generator</title>
    <script src="main.js"></script>
</head>
<body onload="imageTimeOut();" style="max-width: 400px;">
<h2 style="color: blue">Random Image Generator</h2>
<br>
<span id="result"> </span>   
</body>  
</html>

顺晟科技：

我想把它分开一点。

第1部分：布局

要获得3行，每行4个图像，我将使用CSS grid.

可以在元素上声明。这将为要显示的内容声明一个网格容器。

然后还可以声明获得4个均匀响应列。

这将确保为12幅图像获得3x4的网格。

如果您想在网格中的图像之间设置一些空间，这是很好的选择。下面是一个示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Image Generator</title>
    <script src="main.js"></script>
</head>
<body onload="imageTimeOut();" style="max-width: 400px;">
<h2 style="color: blue">Random Image Generator</h2>
<br>
<span id="result"> </span>   
</body>  
</html>

第2部分：随机化图像列表

您可以创建一个小的实用程序shuffle函数（例如Fisher-Yates算法)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Image Generator</title>
    <script src="main.js"></script>
</head>
<body onload="imageTimeOut();" style="max-width: 400px;">
<h2 style="color: blue">Random Image Generator</h2>
<br>
<span id="result"> </span>   
</body>  
</html>

然后，当您准备好重置图像列表时，可以将该列表传递给此函数。

第3部分：使用计时器创建DOM函数

有关此代码，请参阅下面的可运行代码段。

很难理解你真正想要完成的是什么。也许您真的应该洗牌数组，并使用:

上一篇：JavaScript-如何在其他页面下一篇：如何使HTML中的默认文本输入值成为

网站建设

Html

HTML-javascript中的一个一个随机图像生成器-堆栈溢出