JavaScript 基础
Document
运算符
深入数据和类型
函数进阶
原型、继承
类
浏览器存储
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
软件架构模式
设计模式
$$demo <body class="light-theme"> <div class="options"> <label for="light"> <input id="light" type="radio" value="light-theme" name="theme" checked /> <div>日间主题</div> </label>
<label for="dark">
<input id="dark" type="radio" value="dark-theme" name="theme" />
<div>夜间主题</div>
</label>
<label for="pika">
<input id="pika" type="radio" value="pika-theme" name="theme" />
<div>皮卡丘主题</div>
</label>
</div>
<div class="brand">
<h1>三眼鸭编程</h1>
<p>帮助每一个学编程的人</p>
</div>
<img class="logo" src="https://3yya.com/logo.png" alt="logo" />
</body>
<script> if (localStorage.theme) { // 如果 localStorage 中存在主题色的值
// 设置 body 主题色
document.body.className = localStorage.theme
// 选中对应主题色单选框
document.querySelector(
`.options input[name=theme][value=${localStorage.theme}]`
).checked = true
}
document
.querySelectorAll(".options input[name=theme]")
.forEach(function (radio) {
radio.onchange = function () {
// 设置主题色
document.body.className = radio.value
// 保存至 localStorage
localStorage.theme = radio.value
}
})
</script> <style> /* 日间主题 / .light-theme { / 页面的文本色 / --text-color: #333; / 页面的背景色 / --back-color: white; / brand 的背景色 */ --brand-color: #eee; }
/* 夜间主题 */
.dark-theme {
--text-color: white;
--back-color: #333;
--brand-color: black;
}
/* 皮卡丘主题 */
.pika-theme {
--text-color: black;
--back-color: #fed643;
--brand-color: #fc272b;
}
body {
margin: 0;
height: 100%;
min-height: 600px;
display: flex;
/* 竖向排列 */
flex-direction: column;
/* 水平居中 */
align-items: center;
justify-content: center;
/* 应用变量文本色 */
color: var(--text-color);
/* 应用变量背景色 */
background-color: var(--back-color);
transition: color 1s, background-color 1s;
}
.options {
/* 行内 flex 布局 */
display: inline-flex;
background-color: #eee;
border-radius: 16px;
overflow: hidden;
color: #333;
font-weight: bold;
}
.options label input {
/* 隐藏小圆点单选框 */
display: none;
}
.options label div {
padding: 12px;
cursor: pointer;
}
.options label input:checked + div {
/* 单选框按钮选中的样式 */
background-color: teal;
color: white;
}
.brand {
margin: 40px 0;
padding: 0 80px;
border-radius: 8px;
text-align: center;
/* 应用变量 brand 的背景色 */
background-color: var(--brand-color);
/* 因为背景色不会继承 */
/* 所以单独设置过渡效果 */
transition: background-color 1s;
}
.logo {
width: 200px;
}
</style> $$
$$answer
<body class="light-theme">
<div class="options">
<label for="light">
<input
id="light"
type="radio"
value="light-theme"
name="theme"
checked
/>
<div>日间主题</div>
</label>
<label for="dark">
<input id="dark" type="radio" value="dark-theme" name="theme" />
<div>夜间主题</div>
</label>
<label for="pika">
<input id="pika" type="radio" value="pika-theme" name="theme" />
<div>皮卡丘主题</div>
</label>
</div>
<div class="brand">
<h1>三眼鸭编程</h1>
<p>帮助每一个学编程的人</p>
</div>
<img class="logo" src="https://3yya.com/logo.png" alt="logo" />
</body>
<script>
if (localStorage.theme) {
// 如果 localStorage 中存在主题色的值
// 设置 body 主题色
document.body.className = localStorage.theme
// 选中对应主题色单选框
document.querySelector(
`.options input[name=theme][value=${localStorage.theme}]`
).checked = true
}
document
.querySelectorAll(".options input[name=theme]")
.forEach(function (radio) {
radio.onchange = function () {
// 设置主题色
document.body.className = radio.value
// 保存至 localStorage
localStorage.theme = radio.value
}
})
</script>
<style>
/* 日间主题 */
.light-theme {
/* 页面的文本色 */
--text-color: #333;
/* 页面的背景色 */
--back-color: white;
/* brand 的背景色 */
--brand-color: #eee;
}
/* 夜间主题 */
.dark-theme {
--text-color: white;
--back-color: #333;
--brand-color: black;
}
/* 皮卡丘主题 */
.pika-theme {
--text-color: black;
--back-color: #fed643;
--brand-color: #fc272b;
}
body {
margin: 0;
height: 100%;
display: flex;
/* 竖向排列 */
flex-direction: column;
/* 水平居中 */
align-items: center;
justify-content: center;
/* 应用变量文本色 */
color: var(--text-color);
/* 应用变量背景色 */
background-color: var(--back-color);
transition: color 1s, background-color 1s;
}
.options {
/* 行内 flex 布局 */
display: inline-flex;
background-color: #eee;
border-radius: 16px;
overflow: hidden;
color: #333;
font-weight: bold;
}
.options label input {
/* 隐藏小圆点单选框 */
display: none;
}
.options label div {
padding: 12px;
cursor: pointer;
}
.options label input:checked + div {
/* 单选框按钮选中的样式 */
background-color: teal;
color: white;
}
.brand {
margin: 40px 0;
padding: 0 80px;
border-radius: 8px;
text-align: center;
/* 应用变量 brand 的背景色 */
background-color: var(--brand-color);
/* 因为背景色不会继承 */
/* 所以单独设置过渡效果 */
transition: background-color 1s;
}
.logo {
width: 200px;
}
</style>
$$