首页js实现页面刷新图片随机变化

js实现页面刷新图片随机变化

时间: 2024-01-21 10:02:31 浏览: 59

以下是一种实现方法： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>随机图片</title> </head> <body> <img id="img" src="" alt="随机图片"> <button id="btn">换一张</button> <script src="randomImg.js"></script> </body> </html> ``` JavaScript代码（randomImg.js）： ```javascript // 定义图片数组 var imgs = [ "img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg", "img5.jpg" ]; // 获取img元素和btn元素 var img = document.getElementById("img"); var btn = document.getElementById("btn"); // 给btn元素添加点击事件 btn.onclick = function() { // 生成一个随机数，作为图片数组的索引 var index = Math.floor(Math.random() * imgs.length); // 设置img元素的src属性为随机图片的路径 img.src = imgs[index]; }; ``` 解释： 1. 首先定义一个图片数组，里面包含了所有可能出现的图片路径。 2. 然后获取页面中的img元素和btn元素。 3. 给btn元素添加一个点击事件，当点击时，生成一个随机数，作为图片数组的索引，然后将img元素的src属性设置为随机图片的路径。 4. 在HTML中引入这个JavaScript文件。这样，每次点击“换一张”按钮，就会随机显示一张图片。