html好看的有太阳和月亮图标iconfont的主题切换按钮日间和夜间模式
要实现一个好看的有太阳和月亮图标的iconfont的主题切换按钮，可以使用HTML、CSS和JavaScript。首先，需要引入iconfont的CSS文件，然后创建一个按钮，通过JavaScript监听按钮的点击事件，实现日间和夜间模式的切换。
解析：
1. 引入iconfont的CSS文件
2. 创建一个按钮，包含太阳和月亮图标
3. 使用JavaScript监听按钮的点击事件
4. 切换日间和夜间模式的样式
代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主题切换按钮</title>
<!-- 引入iconfont的CSS文件 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_830169_wf3ahfrpqd5.css">
<style>
body {
transition: background-color 0.5s;
}
.theme-switch {
cursor: pointer;
}
.sunny {
color: #FFA500;
}
.night {
color: #0000FF;
}
</style>
</head>
<body>
<button class="theme-switch"><i class="iconfont icon-rijian"></i></button>
<script>
const themeSwitch = document.querySelector('.theme-switch');
let isNightMode = false;
themeSwitch.addEventListener('click', () => {
if (isNightMode) {
document.body.classList.remove('night');
themeSwitch.innerHTML = '<i class="iconfont icon-rijian"></i>';
} else {
document.body.classList.add('night');
themeSwitch.innerHTML = '<i class="iconfont icon-rijian"></i>';
}
isNightMode = !isNightMode;
});
</script>
</body>
</html>
```
这段代码实现了一个简单的主题切换按钮，点击按钮可以在日间和夜间模式之间切换。你可以根据需要修改样式和添加其他功能。
创作工场
免责声明：
以上内容除特别注明外均来源于网友提问，创作工场回答，未经许可，严谨转载。
点击这里>>使用🔥专业版，更聪明、更完整、更原创！