博客園美化夜間模式

博客園美化夜間模式

一.點擊控制樣式

主要看思路,本身增刪改查,裏面樣式只針對個人博客

一.觸發點擊

二.修改按鈕樣式以及對於類名

三.將模式信息存入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('之後要不要提醒您呢（づ￣3￣）づ╭❤～')) {
                    sessionStorage.chiose.removeItem('chiose')
                } else {
                    sessionStorage.chiose = 1
                }
            }
        }
    }
}
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 = 'sun';
                if (confirm('之後要不要提醒您呢（づ￣3￣）づ╭❤～')) {
                    sessionStorage.removeItem('chiose')
                } else {
                    sessionStorage.chiose = 1
                }
            } else {
                sessionStorage.model = 'night';
                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>

代碼僅做爲參考