每次刷新网页都会得到不同的图片展示如何用Javascript进行操作
时间: 2023-05-26 19:03:59 浏览: 56
使用Javascript可以实现以下两种方式来实现随机展示图片:
方式一:预先定义好一个图片数组,利用Math.random()方法随机生成一个0-1之间的数,然后乘以图片数组长度并取整,从而随机获取一个数组下标,最后将对应下标的图片显示在页面上。代码示例:
```javascript
var imgs = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"];
var randomIndex = Math.floor(Math.random() * imgs.length);
var img = document.getElementById("randomImg");
img.src = imgs[randomIndex];
```
方式二:将所有图片的地址放到页面的HTML中的某个元素上,然后在Javascript中获取该元素中的图片地址列表,同样使用Math.random()方法获取一个随机下标,最后将对应下标的图片地址设置到img的src属性上。代码示例:
```html
<div id="imgList" style="display: none;">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
<img src="img4.jpg">
</div>
<img id="randomImg" src="">
```
```javascript
var imgList = document.getElementById("imgList").getElementsByTagName("img");
var randomIndex = Math.floor(Math.random() * imgList.length);
document.getElementById("randomImg").src = imgList[randomIndex].src;
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)