html实现网页夜间模式,通过JS和PHP实现网站夜间模式的自动切换
关于长城的谚语html实现⽹页夜间模式，通过JS和PHP实现⽹站夜间模式的⾃
动切换
前⾔
想做夜间模式很久了，只是苦于JS⼩⽩，不会操作Cookie，最近看到QQ爹的《⽹站夜间模式的实现》
这个功能主要包括三个部分夜间模式开关按钮：⽤来⼿动切换夜间模式的，⾃动存储显⽰模式 Cookie。
⾃动夜间模式：当显⽰模式 Cookie 为空时并且浏览器时间⼤于等于22点⼩于6点时会⾃动进⼊夜间模式，并存储 Cookie。
后端处理：PHP判断是否有显⽰模式 Cookie，有的话直接输出夜间 class，避免进⼊时⽹页闪烁。
具体操作
⾃动根据时间输出夜间模式类名
引⼊夜间模式CSS
可以在原来的style.css⾥新增样式就⾏.dark {
background-color: #333；
color: #eee;
}
.dark a:color {
color: #fafafa;
赵丽颖电视剧全部作品}
...
只要是夜间模式的CSS，增加.dark选择器
指定时间进⼊夜间模式
JS代码来⾃QQ爹function autoNightMode() {买车摇号
if (place(/(?:(?:^|.*;\s*)nightMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") === '') {
if (new Date().getHours() >= 22 || new Date().getHours() < 6) {
建设银行 短信提醒$('body').addClass('dark');
console.log('夜间模式开启');
} else {
$('body').removeClass('dark');
一年级语文下册复习计划console.log('夜间模式关闭');
}
} else {
var night = place(/(?:(?:^|.*;\s*)nightMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if (night == '0') {
console.log('夜间模式关闭'); } else if (night == '1') { $('body').addClass('dark'); console.log('夜间模式开启'); }
}
}
春天来了句子简短autoNightMode();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。