帮我写一个打开显示太阳 关闭显示月亮的按钮
时间: 2024-05-05 15:16:40 浏览: 81
以下是一个简单的HTML和JavaScript代码,可以实现打开显示太阳,关闭显示月亮的按钮。
HTML代码:
```
<button id="sunButton" onclick="showSun()">太阳</button>
<button id="moonButton" onclick="hideMoon()">月亮</button>
<div id="sun" style="display:none;">太阳</div>
<div id="moon" style="display:none;">月亮</div>
```
JavaScript代码:
```
function showSun() {
document.getElementById("sunButton").style.display = "none";
document.getElementById("moonButton").style.display = "block";
document.getElementById("sun").style.display = "block";
}
function hideMoon() {
document.getElementById("sunButton").style.display = "block";
document.getElementById("moonButton").style.display = "none";
document.getElementById("sun").style.display = "none";
document.getElementById("moon").style.display = "block";
}
```
在这个代码中,有两个按钮,一个用于打开显示太阳,另一个用于关闭显示月亮。当用户点击“太阳”按钮时,按钮将隐藏,另一个按钮将显示,并且太阳的div将显示。当用户点击“月亮”按钮时,按钮将隐藏,太阳的div将隐藏,月亮的div将显示。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![xpi](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.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)