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会员专享资源能否直接商用?
提示下载完成但无法解压?
投稿及掉连解决方法:

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

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

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

20条回应

  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

    谢谢

  11. Tinwa2021-12-22 3:29

    学习一下

  12. tinwa2021-12-22 15:14

    再看看

  13. 涉及到2022-4-24 20:00

    这主题我看的眼睛疼。。

    转载请注明来源: https://tsyblog.com/6408.html

  14. xiaoxin0082022-4-25 17:25

    感谢分享

  15. 事实上2022-5-2 0:51

    事实上

  16. 皮卡丘2022-5-5 9:07

    感谢分享

  17. DragonJay2022-6-2 19:40

    正常运行

  18. 周杰伦2022-6-15 11:16

    看一眼吧,谢谢

  19. lingard2022-9-9 14:54

    感谢分享

    转载请注明来源: http://tsyblog.com/6408.html

  20. ksss2022-9-9 15:03

    kankanan看看看看