< script type = "text/javascript" >
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")
}
}
}
})();
</script>
{/collapse-item}
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
body.night 需要调整的区块{
background-color: #000000;
color: #aaa;
}
body.night img {
filter: brightness(30%);
}
<a href="javascript:switchNightMode()" target="_self">Dark</a>
文章来自江东博客:html+js实现网站暗黑模式
评语