期末作业是让做一个网页换肤的功能 ,能否为我生成一个简易的代码来实现这一功能
时间: 2024-02-12 18:05:59 浏览: 63
网页页面换肤功能实现
当然可以。以下是一个简单的网页换肤功能的示例代码:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页换肤示例</title>
<link id="theme-link" rel="stylesheet" href="default.css">
</head>
<body>
<h1>网页换肤示例</h1>
<p>请选择您喜欢的主题:</p>
<select id="theme-select">
<option value="default.css">默认主题</option>
<option value="dark.css">暗黑主题</option>
<option value="light.css">明亮主题</option>
</select>
<script src="theme.js"></script>
</body>
</html>
```
CSS 代码:
```css
/* default.css */
body {
background-color: #f0f0f0;
color: #333;
}
/* dark.css */
body.dark {
background-color: #333;
color: #f0f0f0;
}
/* light.css */
body.light {
background-color: #fff;
color: #333;
}
```
JavaScript 代码:
```js
// theme.js
var themeSelect = document.getElementById('theme-select');
var themeLink = document.getElementById('theme-link');
// 根据用户选择的主题,动态切换样式文件
themeSelect.addEventListener('change', function() {
themeLink.href = themeSelect.value;
// 将用户选择的主题保存在本地存储中
localStorage.setItem('theme', themeSelect.value);
});
// 页面加载时,检查本地存储中是否有用户选择的主题
var savedTheme = localStorage.getItem('theme');
if (savedTheme) {
themeLink.href = savedTheme;
themeSelect.value = savedTheme;
// 根据用户之前的选择,设置 body 的 class
if (savedTheme === 'dark.css') {
document.body.classList.add('dark');
} else if (savedTheme === 'light.css') {
document.body.classList.add('light');
}
}
```
这个示例代码包括一个 HTML 文件、三个 CSS 文件和一个 JavaScript 文件。用户可以通过下拉菜单选择主题,然后页面会切换到对应的样式。同时,用户选择的主题会被保存在本地存储中,以便下次访问时自动应用。
这只是一个简单的示例,实际项目中还需要考虑更多的细节和交互效果。
阅读全文