[博客美化]給本身的我的博客加上夜間模式並實現時間段的自動判斷

時間 2019-12-15

標籤博客美化本身我的加上夜間模式實現時間自動判斷简体版

原文原文鏈接

前言

如今不少app 都已經實現了夜間模式，這樣能夠在夜間的時候保護咱們的眼睛呢?因而，就有了給本身博客添加夜間模式的想法，花很少說，開始吧。javascript

預覽

預覽就在~~左下角~~右下角的看板孃的或者直接點擊按鈕。php

實現思路

本質上講，「夜間模式」就是在指定時間段內修改頁面配色、圖片亮度等，所以咱們把問題拆開爲三部分進行分析：css

動態修改頁面配色、圖片亮度
在指定時間段內修改
具體的樣式內容

動態修改頁面配色、圖片亮度既然提到了動態，就免不了要用到JavaScript了。
咱們知道樣式有三種書寫形式，分別爲外聯、內聯和內嵌。使用JS修改樣式，就要從這三個地方入手：java

引入一個新的外聯CSS文件，以覆蓋原有樣式　　/不影響原有樣式文件、方便維護/
不引入新的CSS，而是在原有CSS上追加樣式，以class名區分　　/方便JS操做，實現優雅、方便維護/
在頁面中插入style標籤，在其中書寫樣式　　/不增長HTTP鏈接數、方便維護/
修改元素的style屬性，即內嵌樣式　　/不推薦/

第四種方法違反了「結構與表現分離的設計思想」，且內嵌樣式優先級太高
並且真正實現的話，須要對大量元素編寫JS代碼，執行效率低下，維護困難，所以通常不做考慮
前三種方法都有其適用場景，在這裏選擇第二種web

以class來區分樣式，實現了功能與表現的分離。對於JS代碼來講，問題變成了如何操做元素的class，而沒必要關心樣式的具體表現。後端

使用JS控制元素class

JS中Element.classList的add()和remove()方法，正好知足咱們的需求，且支持絕大多數瀏覽器(IE10以上支持)
但先別急着寫，還有一個細節：夜間模式這個狀態應被保存下來一直生效，或持續到本次會話結束，cookie能夠知足咱們的要求
因此事情就很明朗了，編寫代碼:瀏覽器

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('夜間模式關閉');
    }
}

便可實現夜間模式的切換和狀態保存。cookie

在指定時間段內修改

思路很簡單，頁面加載後判斷時間，在指定範圍內修改元素class。這裏有一個知識點當即調用函數網絡

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

具體的樣式內容

在上面的代碼中，咱們控制了body的class，這是全部頁面元素的祖先元素。啓用夜間模式時，body的class值含有night
所以在編寫夜間模式的樣式時，在樣式選擇器前加body.night便可，可酌情使用!important
例如:app

body.night{
    background-color: #263238;
    color: #aaa;
}

圖片亮度

使用CSS濾鏡中的brightness()濾鏡(僅支持現代瀏覽器)

body.night img {
    filter: brightness(30%);
}

後端處理

由於是在本地經過JS操控樣式，因此在JS加載先後樣式不同，會致使頁面閃爍。
可在博客主題中加上判斷，知足時間段及檢測到cookie含有相關字段後可直接輸出body class爲night，如：

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

關於夜間模式在博客園實現的簡單說明

只須要兩步就能夠了，說明以下：

經過上面的代碼有兩個js代碼塊，能夠經過引用的方式引入，也能夠經過寫在側邊欄（記得博客園側邊欄是支持js的，我沒有試過，請自行測試。）
和上面的例子同樣，對應着本身寫夜間的css樣式。

版權聲明

部分資源引用於網絡。
Element.classList - Web API | MDN
給博客添加夜間模式
 Document.cookie - Web API 接口 | MDN
filter - CSS | MDN

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。