欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

博客园美化夜间模式

程序员文章站 2022-05-23 12:14:05
博客园美化夜间模式 一.点击控制样式 一.触发点击 二.修改按钮样式以及对于类名 三.将模式信息存入sessionStorage中 四.更具按钮的类名,自己博客样式进行跟换 二.时间控制切换 考虑情况: 1.时间到了提醒是不是要切换 2.已经是夜间模式了就用切换 3.有些人不喜欢这些提示 这段代码解 ......

博客园美化夜间模式

一.点击控制样式

主要看思路,自己增删改查,里面样式只针对我的博客

一.触发点击

二.修改按钮样式以及对于类名

三.将模式信息存入sessionstorage中

四.更具按钮的类名,自己博客样式进行跟换

<!--夜间模式点击事件js-->
<script >
let night_close = document.queryselector('.night-close')||document.queryselector('.night-open');
night_close.onclick = function () {
    let button_classname = this.classname;
    button_classname == 'night-close' ? sessionstorage.model = 'night' :                      sessionstorage.model = 'sun'
    button_classname == 'night-close' ? this.classname = 'night-open' : this.classname = 'night-close'
    button_classname == 'night-close' ? this.innerhtml = '夜间模式:<span style="color:greenyellow">开启</span>' : this.innerhtml = '夜间模式:<span style="color:red">关闭</span>'
    let body = document.queryselector('body');
    let post = document.queryselector('.post');
    let header = document.queryselector('#header');
    let days = document.queryselectorall('.day');
    let tiankong = document.queryselector('.tiankong');
    let calendar = document.queryselector('#blog-calendar');
    //页首图片
    button_classname == 'night-close' ? tiankong.style.display = 'none' : tiankong.style.display = 'block'
    //整体颜色
    button_classname == 'night-close' ? body.style.background = '#0b1226' : body.style.background = '#fff'
    //日历
    calendar.style.backgroundcolor = '#ffffff'
    //头部
    button_classname == 'night-close' ? header.style.background = 'url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_sleep2.png) no-repeat 898px -65px' : header.style.background = 'url(https://images.cnblogs.com/cnblogs_com/pythonywy/1455150/o_1kongbai.png)'
    if (button_classname != 'night-close') {
        header.style.backgroundsize = '100% 100%'
    }
    if (days) {
        for (var days_index = 0, a = days.length; days_index < a; days_index++) {
            days[days_index].style.backgroundcolor = '#ffffff'
        }
    }
    //正文
    if (post) {
        post.style.backgroundcolor = '#ffffff'
    }
};

</script>

二.时间控制切换

考虑情况:

1.时间到了提醒是不是要切换

2.已经是夜间模式了就用切换

3.有些人不喜欢这些提示

这段代码解决这3中情况,内容自己理解

<!--夜间模式分支,根据时间通过session中存储的信息修改-->
<script>
    var time_obj = new date();
    var time_hour = time_obj.gethours();
    var night_model = sessionstorage.getitem('model');
    var chiose = sessionstorage.getitem('chiose');
    console.log(!chiose);
    console.log(night_model != 'night');
    console.log(parseint(time_hour) >= 18 || parseint(time_hour) <= 6);
    if (!chiose) {
        if (night_model != 'night') {
            if (parseint(time_hour) >= 18 || parseint(time_hour) <= 6) {
                if (confirm("到晚上了是否开启夜间模式?")) {
                    sessionstorage.model = 'night';
                    if (confirm('以后要不要提醒您呢')) {
                        sessionstorage.removeitem('chiose')
                    } else {
                        sessionstorage.chiose = 1
                    }
                } else {
                    sessionstorage.model = 'sun';
                    if (confirm('以后要不要提醒您呢')) {
                        sessionstorage.chiose.removeitem('chiose')
                    } else {
                        sessionstorage.chiose = 1
                    }
                }
            }
        }
    }
</script>

三.结合session存储的信息进行切换模式

为了解决问题:

1.跳转页面后要重复切换模式

2.提示后进行切换

注意点:这段代码必须放在时间控制后面,不然时间那段没啥用

<!--夜间模式分支,session中有night切换夜间模式-->
<script >
letmodel = sessionstorage.getitem('model')
if (model == 'night') {
    let body_night = document.queryselector('body');
    let post_night = document.queryselector('.post');
    let header_night = document.queryselector('#header');
    let days_night = document.queryselectorall('.day');
    let tiankong_night = document.queryselector('.tiankong');
    let calendar_night = document.queryselector('#blog-calendar');
    night_close.classname = 'night-open'
    night_close.innerhtml = '夜间模式:<span style="color:greenyellow">开启</span>'
    tiankong_night.style.display = 'none'
    body_night.style.background = '#0b1226'
    calendar_night.style.backgroundcolor = '#ffffff'
    header_night.style.background = 'url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_sleep2.png) no-repeat 898px -65px'
    if (days_night) {
        for (var days_index = 0, c = days_night.length; days_index < c; days_index++) {
            console.log(days_night[days_index])
            days_night[days_index].style.backgroundcolor = '#ffffff'
        }
        if (post_night) {
            post_night.style.backgroundcolor = '#ffffff'
        }
    }
}
</script>

代码仅作为参考