随着用户体验的提升，越来越多的网站开始提供白天和黑夜模式来满足用户的不同需求。白天模式通常是浅色系，适合白天浏览；黑夜模式则是深色系，适合晚上浏览，能够减轻眼睛疲劳。上次介绍过《简单一行代码，为网站开启深色模式支持》，但效果不是很好；本文将介绍如何使用JavaScript为网页添加白天和黑夜模式的切换功能。
首先，我们需要一个基本的HTML结构，其中包括一个按钮用于切换模式!
<a href="javascript:switchNightMode()" target="_self">切换模式</a>
js代码
function switchNightMode() {
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0";
if (night == "0") {
document.body.classList.add("night");
document.cookie = "night=1;path=/";
console.log("夜间模式开启")
} else {
document.body.classList.remove("night");
document.cookie = "night=0;path=/";
console.log("夜间模式关闭")
}
} (function() {
if (document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === "") {
if (new Date().getHours() > 21 || new Date().getHours() < 6) {
document.body.classList.add("night");
document.cookie = "night=1;path=/";
console.log("夜间模式开启")
} else {
document.body.classList.remove("night");
document.cookie = "night=0;path=/";
console.log("夜间模式关闭")
}
} else {
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0";
if (night == "0") {
document.body.classList.remove("night")
} else {
if (night == "1") {
document.body.classList.add("night")
}
}
}
})();
加好后在您的页面body处加入php判断，这样当检测到cookie相关字段时直接输出body的class为night，已防止页面闪烁。
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
最后再将网站中所有需要变暗的地方调整其css，以达到变暗效果，具体css调整示例可看下方
body.night 需要调整的区块{
background-color: #000000;
color: #aaa;
}
body.night img {
filter: brightness(30%);
}
这样当晚上9点到白天6点之间，网站打开时就自动会变成暗黑模式。当然，你也可以通过按钮来手动控制打开关闭暗黑模式。
陕ICP备2024028768号-1