白天黑夜切换好看的JS
时间: 2024-05-04 10:18:20 浏览: 66
以下是一个简单的实现白天黑夜切换的例子:
HTML:
```html
<body id="body">
<h1>Hello World!</h1>
<button id="btn">切换主题</button>
</body>
```
CSS:
```css
body {
background-color: white;
color: black;
}
body.dark {
background-color: black;
color: white;
}
```
JS:
```js
const btn = document.getElementById('btn');
const body = document.getElementById('body');
btn.addEventListener('click', () => {
body.classList.toggle('dark');
});
```
这里使用了 `classList` 和 `toggle` 方法来切换 `body` 元素的类名。当点击按钮时,会自动切换为夜间主题,再次点击则会切换回白天主题。可以根据需要自行修改样式和实现逻辑。
相关问题
js白天黑夜样式切换
要实现白天黑夜样式切换,你可以使用JavaScript来动态修改页面的CSS样式。以下是一个简单的实现示例:
1. 首先,在HTML文件中添加一个按钮或其他触发切换的元素,例如:
```html
<button onclick="toggleDayNightMode()">切换模式</button>
```
2. 在CSS文件中定义白天和黑夜的样式,例如:
```css
body {
/* 白天样式 */
background-color: #ffffff;
color: #000000;
}
body.dark-mode {
/* 黑夜样式 */
background-color: #000000;
color: #ffffff;
}
```
3. 在JavaScript文件中编写一个函数来切换样式,例如:
```javascript
function toggleDayNightMode() {
var body = document.body;
body.classList.toggle("dark-mode");
}
```
这个函数会在按钮点击时切换`body`元素的`dark-mode`类。当该类存在时,会应用黑夜样式,否则应用白天样式。
通过这种方式,你可以实现简单的白天黑夜样式切换功能。你可以根据需要自定义样式和切换逻辑。
android监听白天黑夜切换
要在 Android 中监听白天黑夜切换,可以使用 `UiModeManager` 类。
首先,在需要监听白天黑夜切换的 Activity 中,获取 `UiModeManager` 实例,并注册监听器。
```java
public class MainActivity extends AppCompatActivity {
private UiModeManager uiModeManager;
private UiModeManager.OnUiModeChangedListener onUiModeChangedListener;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 获取 UiModeManager 实例
uiModeManager = (UiModeManager) getSystemService(Context.UI_MODE_SERVICE);
// 创建监听器
onUiModeChangedListener = new UiModeManager.OnUiModeChangedListener() {
@Override
public void onUiModeChanged(int mode) {
switch (mode) {
case UiModeManager.MODE_NIGHT_NO:
// 白天模式
break;
case UiModeManager.MODE_NIGHT_YES:
// 黑夜模式
break;
}
}
};
// 注册监听器
uiModeManager.addOnUiModeChangedListener(onUiModeChangedListener);
}
@Override
protected void onDestroy() {
super.onDestroy();
// 取消注册监听器
uiModeManager.removeOnUiModeChangedListener(onUiModeChangedListener);
}
}
```
这样,当系统切换为白天或黑夜模式时,监听器就会收到通知,并执行相应的操作。注意,在 `onDestroy` 方法中要取消注册监听器,避免内存泄漏。
相关推荐
![](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)