按时间随机变化的网页背景的代码
时间: 2024-03-10 21:46:29 浏览: 13
以下是一个简单的实现方法,使用 JavaScript 和 CSS:
HTML 代码:
```
<body>
<div id="background"></div>
<!-- 其他页面内容 -->
</body>
```
CSS 代码:
```
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("bg-1.jpg");
background-size: cover;
transition: background-image 1s ease-out;
}
```
JavaScript 代码:
```
var images = ["bg-1.jpg", "bg-2.jpg", "bg-3.jpg"]; // 背景图片数组
var interval = 5000; // 背景图片变换时间间隔,单位:毫秒
function changeBackground() {
var index = Math.floor(Math.random() * images.length); // 随机选择一个背景图片
var element = document.getElementById("background");
element.style.backgroundImage = "url('" + images[index] + "')"; // 切换背景图片
}
setInterval(changeBackground, interval);
```
这段代码会在页面加载后,以 `interval` 的时间间隔随机切换 `images` 数组中的背景图片。使用 CSS 的 `transition` 属性可以让背景图片切换时产生渐变效果。