关于博客夜晚模式那点事

夜晚模式现在很多博客都有的一个功能!连iOS都要更新了夜晚模式!我再不更新就有点说不过去了!

于是我在网上找找看看有没有相关的教程!别说还真有!而且一顺水的全都是一样的文章!连标点符号都不带有变化的!看见这么多博主不辞辛苦的复制粘贴,我想代码应该不错!所以我就试了试!这也就是我第一个版本的黑夜模式!但是经过测试以后发现这个方法有个问题!就是不能转换,第一次进去这个网站是什么颜色就一直是什么颜色!一开始我认为是缓存问题所以我添加禁止浏览器缓存的代码!这回PC端和iOS端可以了但是安卓还是不行!于是我就去问下了那个“作者”,但作者信心满满的告诉我不可能绝对没问题!清理缓存就好了!

哎!可能圈子不一样吧!毕竟看他博客的人都是技术人员!而且很贴心的知道现在应该是夜晚模式了!我应该清理下缓存!但是咱博客跟他比不了啊,没有那么多的“技术人员”呀!所以没办法自己弄吧!

其实我的深夜模式思路很简单分别用3个CSS,分别为主框架的CSS、白天要是显示的CSS和晚上要显示的CSS,然后再直接判断用户的时间来显示黑的还是白的!

首先用到如下JS用来切换CSS
<script type="text/javascript">
function getCSS()
{
        datetoday = new Date();
        timenow=datetoday.getTime();
        datetoday.setTime(timenow);
        thehour = datetoday.getHours();
        if (thehour<5)
            display = "https://miracol.cn/media/css/night.css";
       else if (thehour>19)
            display = "https://miracol.cn/media/css/night.css";   
        else if (thehour>5)
            display = "https://miracol.cn/media/css/day.css";
        else if (thehour<19)
            display = "https://miracol.cn/media/css/day.css";
var css = '<';
        css+='link rel="stylesheet" href='+display+' \/';
        css+='>';
        document.write(css);
}
</script>
再添加:
<script type="text/javascript">
window.onload=getCSS();
</script>

night.css为黑天的主题颜色!day.css为白天的主题颜色!(CSS自己写啊!)

就是这么简单!缺点就是太麻烦!而且不要偷懒只写一个黑色的CSS!以一位过来人的经验告诉你这样做会闪白!

90后待业博主。More..