您可以使用jQuery来监听一个按钮点击事件,然后通过改变body的class来切换日间和夜晚模式。以下是一个简单的实现示例:
HTML:
<button id="day-night-toggle">切换模式</button>
CSS:
/* 日间模式 */
.day-mode {
background: #f3f3f3;
color: #000;
}
/* 夜晚模式 */
.night-mode {
background: #212121;
color: #fff;
}
jQuery:
$(document).ready(function() {
$('#day-night-toggle').click(function() {
$('body').toggleClass('day-mode night-mode');
});
});
这段代码中,我们定义了两种模式的背景和文字颜色。通过点击按钮,使用toggleClass
方法来在body
元素上添加或删除.day-mode
和.night-mode
类,从而实现日间和夜晚模式的切换。