帮我写一个打开显示太阳图案 关闭显示月亮图案的按钮
时间: 2024-05-03 10:22:25 浏览: 21
以下是一个简单的HTML和JavaScript代码示例,用于创建一个“开/关”按钮,以打开和关闭显示太阳和月亮图案:
```html
<!DOCTYPE html>
<html>
<head>
<title>Toggle Sun and Moon</title>
<style>
body {
background-color: #222;
}
#sun, #moon {
display: none;
font-size: 100px;
color: #FFE400;
text-align: center;
margin-top: 50px;
}
#btn {
background-color: #FFE400;
color: #222;
font-size: 24px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="sun">☀</div>
<div id="moon">🌗</div>
<button id="btn" onclick="toggle()">Toggle</button>
<script>
function toggle() {
var sun = document.getElementById("sun");
var moon = document.getElementById("moon");
if (sun.style.display === "none") {
sun.style.display = "block";
moon.style.display = "none";
} else {
sun.style.display = "none";
moon.style.display = "block";
}
}
</script>
</body>
</html>
```
在这个示例中,我们使用了CSS将太阳和月亮图案隐藏了起来,然后使用JavaScript创建了一个`toggle()`函数,以在按钮被点击时切换这两个图案的显示。当太阳图案被显示时,月亮图案会被隐藏,反之亦然。按钮的样式也被设置为一个黄色背景和黑色文字,以使其与图案颜色相反。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)