:当页面刷新时,随机更改body的背景图片
时间: 2024-02-18 15:03:08 浏览: 25
可以通过 JavaScript 来实现页面刷新时随机更改 `body` 的背景图片,具体步骤如下:
1. 在 HTML 页面中,定义 `body` 的样式,例如:
```html
<style>
body {
background-image: url("bg1.jpg");
}
</style>
```
2. 在 JavaScript 中,定义一个数组,包含所有可能的背景图片,例如:
```javascript
var bgImages = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg"];
```
3. 定义一个函数,用于随机选择一个背景图片,并更新 `body` 的样式,例如:
```javascript
function randomizeBackground() {
var randomIndex = Math.floor(Math.random() * bgImages.length);
var randomImage = bgImages[randomIndex];
document.body.style.backgroundImage = "url(" + randomImage + ")";
}
```
这个函数会生成一个随机数,根据这个随机数从数组中选择一个背景图片,然后将该图片设置为 `body` 的背景图。
4. 在页面加载时,调用上面定义的函数,例如:
```javascript
window.onload = function() {
randomizeBackground();
};
```
这样,当页面加载时,会随机选择一个背景图片,并设置为 `body` 的背景图。
每次刷新页面时,都会随机选择一个新的背景图片,从而实现了随机更改 `body` 的背景图片的效果。