首页有一个按钮控件，且该按钮控件用来切换一整个页面的深浅色外观，当点击该按钮控件时变为太阳图标，再按一次时变为月亮图标。（利用 HTML CSS JavaScript）

有一个按钮控件，且该按钮控件用来切换一整个页面的深浅色外观，当点击该按钮控件时变为太阳图标，再按一次时变为月亮图标。（利用 HTML CSS JavaScript）

时间: 2024-09-09 19:17:39 浏览: 120

PB中制作进度条_pb控件_pb_进度条_

在VB和Delphi等语言中都提供了“进度条”控件，PB中没有现成的控件提供，但我们可以做一个“进度条”的用户定义对象（user object），象控件一样在程序中调用。具体方法如下：新建一个用户对象UO_PROGRESSBAR，加上两个长方形(rectangle)控件r_1和r_2，同时加上两条线(line)控件ln_1和ln_2。线用于增加r_1的立体效果，r_2颜色为兰色，用于显示进度。

在HTML、CSS和JavaScript中，你可以创建一个这样的按钮效果。首先，你需要两个不同的图片代表太阳和月亮图标，然后通过JavaScript控制它们的显示和隐藏。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>切换外观</title> <style> .button { display: inline-block; padding: 10px 20px; background-color: #ccc; color: white; border: none; cursor: pointer; } .hidden { display: none; } </style> </head> <body> <button id="switchButton" class="button" onclick="toggleIcons()">切换外观</button> <img id="sunIcon" src="sun.png" alt="太阳" class="hidden"> <img id="moonIcon" src="moon.png" alt="月亮"> <script> function toggleIcons() { var sun = document.getElementById('sunIcon'); var moon = document.getElementById('moonIcon'); if (sun.style.display === 'none') { sun.style.display = 'block'; moon.style.display = 'none'; document.getElementById('switchButton').innerHTML = "太阳"; } else { sun.style.display = 'none'; moon.style.display = 'block'; document.getElementById('switchButton').innerHTML = "月亮"; } } </script> </body> </html> ``` 在这个例子中，`toggleIcons`函数会在按钮被点击时切换两个图像的显示状态，并更新按钮的文字内容。记得将'sun.png'和'moon.png'替换为你实际的图片路径。

阅读全文