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

前端笔记 2020-09-18 72℃ 0 0

前言

想做夜间模式很久了,只是苦于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();

评论 (0)

友情链接
最近评论
  1. Thiết kế phòng hát karaoke : I got this website from my pal who told me on the topic of this site and now this time I am visiting this site and
    reading very informative articles or reviews here.
  2. Lil Durk : Hello I am so grateful I found your website, I really found you by accident, while
    I was researching on Google for something else, Regardless I am here now and would just like to say
    thanks for a marvelous post and a all round exciting
    blog (I also love the theme/design), I don’t have time to read it all at the moment but I have book-marked it and also
    added your RSS feeds, so when I have time I will be back to read more, Please do keep up the superb b.
  3. Sbobet99 : Howdy thiiѕ is kinda of off tօpic but Ι was wondering if blogs use
    WYSIWYG editors or if you have to manually code with HTML.I'm starting a blog so᧐n butt have no coding skills so I wantеd to get guidаnce
    from someone with experience. Any help would be enormously аpprecіated!
  4. choithethao.tips : Undeniably believe that which you said. Your favorite
    justification seemed to be on the net the easiest thing to be aware of.
    I say to you, I certainly get irked while people consider
    worries that they plainly don't know about. You managed to
    hit the nail upon the top and also defined out the whole thing without having side-effects ,
    people can take a signal. Will likely be back to get more.Thanks
  5. https://veviewwii.tumblr.com/post/662643202115944448/ml-18s21-t2-2 : Link exchange is nothing else however it is simply placing the other
    person's web site link on your page at suitable place and other person will also do similar in support of
    you.
Top