极客教程JavaScript 生成随机图片
在这篇文章中，我们将学习如何在固定时间间隔内仅使用HTML、CSS和JavaScript生成随机图片。
方法： 在网站上随机生成的图片应该以数组的形式存储，这些图片会在规定的时间间隔内显示给用户。我们使用JavaScript的内置函数 setInterval() 来设置图片显示之间的计时器，并使用 floor(Math.random() * pics.length) 方法生成一个在0到数组长度范围内的随机数，该范围用于随机显示要展示的图片。
下面是上述方法的逐步实现。
步骤1： 在你的HTML页面中，创建一个空的部分，用于包含随机生成的图片。
index.html
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background: rgba(120, 16, 180, 0.767);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
margin: 1.5vh 20vw;
margin-top: 10vh;
text-align: center;
background: rgb(39, 188, 209);
background: linear-gradient(118deg,
rgba(39, 188, 209, 0.9783263647255778) 0%,
rgba(6, 14, 101, 1) 100%);
opacity: 0.9;
color: white;
padding: 10px 10vw;
border-radius: 20px;
min-height: 15vh;
}
h1 {
text-transform: uppercase;
}
section {
height: 50vh;
width: 100%;
margin-top: -50px;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="container">
<br>
<h1>Geeks For Geeks Courses</h1><br>
<p>
With the idea of imparting programming
knowledge, Mr. Sandeep Jain, an IIT
Roorkee alumnus started a dream,
GeeksforGeeks. Whether programming
excites you or you feel stifled,
wondering how to prepare for interview
questions or how to ace data structures
and algorithms, GeeksforGeeks is a
one-stop solution.
</p>
<br><br><br>
<section></section>
<br>
</div>
</body>
</html>
输出：
创建一个JavaScript变量，用于存储使用Math库计算出的随机值，即 Math.floor(Math.random()*pics.length)。它将生成一个介于0和pics数组长度之间的随机数，将被赋值给pics数组中的图片以随机显示。
setInterval() 是JavaScript的内置函数，用于设置图片之间的计时器以进行显示。它有两个参数，需要执行的函数和每次生成之间的时间间隔。
现在将所有的JS代码与HTML代码结合起来。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Image Generator</title>
<style>
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background: rgba(120, 16, 180, 0.767);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
margin: 1.5vh 20vw;
margin-top: 10vh;
text-align: center;
background: rgb(39, 188, 209);
background: linear-gradient(118deg,
rgba(39, 188, 209, 0.9783263647255778) 0%,
rgba(6, 14, 101, 1) 100%);
opacity: 0.9;
color: white;
padding: 10px 10vw;
border-radius: 20px;
min-height: 15vh;
}
h1 {
text-transform: uppercase;
}
section {
height: 50vh;
width: 100%;
margin-top: -50px;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<br>
<h1>Geeks For Geeks Courses</h1><br>
<p>
With the idea of imparting programming knowledge,
Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream,
GeeksforGeeks. Whether programming excites you or you
feel stifled, wondering how to prepare for interview
questions or how to ace data structures and algorithms,
GeeksforGeeks is a one-stop solution.
</p>
<br><br><br>
<section></section>
<br>
</div>
<script>
const pics = [
'url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200316135008/red7.png")',
'url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200316135014/yellow3.png")',
'url(
"https://media.geeksforgeeks.org/img-practice/MaskGroup58@2x-min-1637846347.png")',
'url(
"https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-course-overview-image.png")',
'url(
"https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-thumbnail.png")',
'url(
"https://media.geeksforgeeks.org/img-practice/banner/Amazon-Test-Series-thumbnail.png")',
'url(
"https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png")'
];
const pic = document.querySelector('section');
function showImage() {
var a = Math.floor(Math.random() * pics.length);
var img = pics[a];
pic.style.backgroundImage = img;
}
setInterval(showImage, 1000);
</script>
</body>
</html>
输出：
