当页面刷新时,随机更改body的背景图片(背景图片从img文件下面的b1.jpg到b4.jpg中随机产生)
时间: 2024-02-18 20:01:58 浏览: 35
可以使用JavaScript来实现页面刷新时随机更改body的背景图片的效果,具体操作如下:
1. 在HTML文件中,需要在body标签中添加一个用于显示背景的元素,比如一个div:
```html
<body>
<div id="background"></div>
<!-- 其他 HTML 元素 -->
</body>
```
2. 在CSS文件中定义这个元素的样式,包括宽度、高度和背景图片等:
```css
#background {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
```
3. 在JavaScript中定义一个数组,用来存储可以作为背景图片的文件名:
```js
var images = ["b1.jpg", "b2.jpg", "b3.jpg", "b4.jpg"];
```
4. 定义一个函数,用来随机从数组中选择一张图片,并将其设置为背景图片:
```js
function changeBackground() {
var image = images[Math.floor(Math.random() * images.length)];
document.body.style.backgroundImage = "url('img/" + image + "')";
}
```
5. 最后,在页面加载时调用这个函数:
```js
window.onload = function() {
changeBackground();
}
```
这样就可以实现页面刷新时随机更改body的背景图片的效果了。