<!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 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录