html背景自动换,html页面换皮肤颜色、背景图片(更换页面背景,常驻缓存)刷新保存...
时间: 2024-05-06 10:16:07 浏览: 61
实现网页背景自动换、更换皮肤颜色和背景图片需要使用JavaScript和CSS。
1. 背景自动换
可以使用JavaScript设置一个定时器,每隔一段时间就更换背景图。代码如下:
```javascript
var i = 1;
setInterval(function() {
document.body.style.backgroundImage = "url('bg_" + i + ".jpg')";
i++;
if (i == 5) {
i = 1;
}
}, 5000);
```
上述代码会在5秒钟内更换一次背景图,切换的图片名称为`bg_1.jpg`、`bg_2.jpg`、`bg_3.jpg`、`bg_4.jpg`,循环播放。
2. 更换皮肤颜色
使用CSS的伪类`:root`来设置全局变量,然后在JavaScript中通过改变这些变量的值来更改页面皮肤颜色。代码如下:
```css
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
body {
background-color: var(--secondary-color);
}
h1 {
color: var(--primary-color);
}
```
```javascript
document.documentElement.style.setProperty('--primary-color', '#ff0000');
document.documentElement.style.setProperty('--secondary-color', '#ffffff');
```
上述代码会将`--primary-color`的值改为红色,`--secondary-color`的值改为白色。
3. 更换背景图片
使用JavaScript来更改CSS文件中定义的背景图片地址。代码如下:
```css
body {
background-image: url('bg_1.jpg');
}
```
```javascript
document.styleSheets[0].rules[0].style.backgroundImage = "url('bg_2.jpg')";
```
上述代码将背景图片从`bg_1.jpg`改为`bg_2.jpg`。
刷新保存可以使用localStorage或cookie来保存用户选择的主题。在页面加载时,读取localStorage或cookie中保存的主题信息,然后应用到页面上。
阅读全文