TSYBLOG.COM

给WordPress网站添加护眼色 夜间模式功能 附时间与按钮两种方式

时间调节

下面分享两种方法,一种是根据时间自动变换为夜间模式,另一种是按钮切换的方式。 首先加入js代码,你可以扔footer页脚:
<script type="text/javascript">
    //夜间模式
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || 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');
        }
    }
})();
//夜间模式切换
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('夜间模式关闭');
    }
}
</script>

其次在header页头的body加入php判断
检测到cookie相关字段直接输出body class为night,防止页面闪烁。
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>"> 

最后调试CSS

此区域内容需评论后可见

喜欢本文?
文章阅读
常见问题
免费下载或者VIP会员专享资源能否直接商用?
提示下载完成但无法解压?
投稿及掉连解决方法:

本站均测试后上架,保证所提供下载的资源的准确性、安全性和完整性。

如有链接无法下载、失效或广告,下方评论区留言,或联系客服处理,看到处理!

如果您也有好的资源或教程,您可以投稿发布,所得成本报酬归发布方所有!

10条回应

试试水进行回复 取消回复

  1. kanyixia2020-4-20 17:17

    看一下

  2. 昼白2020-7-16 21:27

    感谢分享

  3. 阿峰博客2020-10-22 10:57

    这主题我看的眼睛疼。。

  4. 试试水2021-3-2 20:09

    看看怎么搞

  5. 瑞刚博客2021-5-5 19:50

    感谢分享

  6. 瑞刚博客2021-5-6 17:20

    能打开就不错了

  7. 和尚2021-5-15 17:16

    看看哈哈

  8. HMAU2021-8-21 10:21

    好花得主题

  9. 成都2021-11-8 16:51

    看看

  10. 杨少2021-11-25 21:48

    谢谢