欢迎您访问橙子博客
推荐

使用JavaScript实现网页的白天黑夜模式

作者
橙子2024-09-08 16:24 313 浏览
打赏 收藏

  随着用户体验的提升,越来越多的网站开始提供白天和黑夜模式来满足用户的不同需求。白天模式通常是浅色系,适合白天浏览;黑夜模式则是深色系,适合晚上浏览,能够减轻眼睛疲劳。上次介绍过《简单一行代码,为网站开启深色模式支持》,但效果不是很好;本文将介绍如何使用JavaScript为网页添加白天和黑夜模式的切换功能。

首先,我们需要一个基本的HTML结构,其中包括一个按钮用于切换模式!

<a href="javascript:switchNightMode()" target="_self">切换模式</a>

‌‌js代码

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")
            }
        }
    }
})();

‌加好后在您的页面body处加入php判断,这样当检测到cookie相关字段时直接输出body的class为night,已防止页面闪烁。

<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">

‌最后再将网站中所有需要变暗的地方调整其css,以达到变暗效果,具体css调整示例可看下方

body.night 需要调整的区块{
    background-color: #000000;
    color: #aaa;
}
body.night img {
    filter: brightness(30%);
}

这样当晚上9点到白天6点之间,网站打开时就自动会变成暗黑模式。当然,你也可以通过按钮来手动控制打开关闭暗黑模式。

打赏 :
分享:
扫码支持 扫码支持
版权声明 1、文章标题:使用JavaScript实现网页的白天黑夜模式
2、本文网址:https://www.ther.cn/Web/95.html
3、本站部分内容来源于网络,仅供大家学习与参考,如有侵权,请联系站长邮箱:906080088@qq.com进行处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。

广告