随机图片展示 - 点击显示随机图片
<!DOCTYPE html>
<html>
<head>
<title>随机图片展示 - 点击显示随机图片</title>
<script type="text/javascript">
function displayRandomImage() {
var images = ['photo/image1.jpg', 'photo/image2.jpg', 'photo/image3.jpg', 'photo/image4.jpg', 'photo/image5.jpg', 'photo/image6.jpg', 'photo/image7.jpg', 'photo/image8.jpg', 'photo/image9.jpg', 'photo/image10.jpg'];
var randomIndex = Math.floor(Math.random() * images.length);
var img = document.createElement('img');
img.src = images[randomIndex];
document.getElementById('image-container').appendChild(img);
}
</script>
<style type="text/css">
#image-container {
text-align: center;
margin-top: 50px;
}
img {
max-width: 500px;
max-height: 500px;
}
</style>
</head>
<body>
<button onclick="displayRandomImage()">显示随机图片</button>
<div id="image-container"></div>
</body>
</html>
<p>请将以上代码复制到你的代码编辑器中,然后将photo文件夹中的图片路径添加到'images'数组中。当用户点击'显示随机图片'按钮时,将调用'displayRandomImage'函数,该函数将从数组中随机选择一张图片并将其添加到id为'image-container'的div中。该div用于显示图片。请注意,你需要将'photo'文件夹路径替换为你自己的文件夹路径,以便代码能够找到你的图片。</p>
原文地址: https://www.cveoy.top/t/topic/nvZb 著作权归作者所有。请勿转载和采集!