通过JS和PHP实现网站夜间模式的自动切换

前言

想做夜间模式很久了,只是苦于JS小白,不会操作Cookie,最近看到QQ爹的《网站夜间模式的实现

这个功能主要包括三个部分

  1. 夜间模式开关按钮:用来手动切换夜间模式的,自动存储显示模式 Cookie。
  2. 自动夜间模式:当显示模式 Cookie 为空时并且浏览器时间大于等于22点小于6点时会自动进入夜间模式,并存储 Cookie。
  3. 后端处理:PHP判断是否有显示模式 Cookie,有的话直接输出夜间 class,避免进入时网页闪烁。

具体操作

自动根据时间输出夜间模式类名

<body class="<?php if ($_COOKIE['nightMode'] == 1) : ?> dark<?php endif; ?>">

引入夜间模式CSS

可以在原来的style.css里新增样式就行

.dark {
    background-color: #333;
    color: #eee;
}
.dark a:color {
    color: #fafafa;
}
...

只要是夜间模式的CSS,增加.dark选择器

指定时间进入夜间模式

JS代码来自QQ爹

function autoNightMode() {
    if (document.cookie.replace(/(?:(?:^|.*;\s*)nightMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") === '') {
        if (new Date().getHours() >= 22 || new Date().getHours() < 6) {
            $('body').addClass('dark');
            document.cookie = "nightMode=1;path=/"
            console.log('夜间模式开启');
        } else {
            $('body').removeClass('dark');
            document.cookie = "nightMode=0;path=/"
            console.log('夜间模式关闭');
        }
    } else {
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)nightMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if (night == '0') {
            console.log('夜间模式关闭');
        } else if (night == '1') {
            $('body').addClass('dark');
            console.log('夜间模式开启');

        }
    }
}
autoNightMode();
o PHP 功能
打赏
相关推荐
  • WordPress 高级模板 Vieu 主题 V4.5 免授权正式版

    主题亮点全站自适应全站响应式自适应模板,一个模板手机电脑平板都能访问自定义风格可组合开启,最大化支持自定义组合各种风格VIP会员功能新增会员下载、会员可见、会员打折等专属功能,不同等级会员权限不同付费商城文章内支持付费下载、付费可见、全文付费阅读等功能独立下载本站自主开发集成独立下载功能,支持...
    2020-09-20 953 0 0
  • ZiBll 3.3-专为博客、自媒体、资讯类网站开发的wordpress主题

    主题介绍Zibll子比主题专为阅读类网站开发,设计简单优雅、功能众多。UI界面模块化、多种布局、多样显示效果可选择,超自由,更容易搭配出自己喜欢的网站。整体的开发理念都是围绕着阅读体验!减少花里胡哨的沉郁功能,把核心都集中在内容上。页面的布局、间距、功能都精心设计,只为让页面浏览更加自然,让用...
    2020-09-19 939 0 0
  • Lanstar 三栏简约模板

    一个比较简约的三栏模板,优化测试中,欢迎STAR预览功能与特性功能介绍自适应适配各种大小尺寸屏幕(大概表情功能应该是目前所有用心主题的标配了回复可见功能文章内设置后,游客或者其他用户需要评论才能看到隐藏内容,文章作者则可以直接观看代码高亮支持常见语法的高亮,并显示行号友链页面无插件实现灯箱功能...
    2020-09-12 843 0 0

发表评论

;-) :| :smile: :sad: :razz: :oops: :o :lol: :grin: :cry: :cool: :???:

评论列表(暂无评论)

通过JS和PHP实现网站夜间模式的自动切换
09/18
2020
前言想做夜间模式很久了,只是苦于JS小白,不会操作Cookie,最近看到QQ爹的《网站夜间模式...
扫描右侧二维码阅读全文