夜间模式

序言

  看着学长的网站上 soarli的花园夜间模式花里胡哨的在家学习js将近一个月，终于实现了初步的夜间模式切换。

正文

初步结构2021.8.1

  基本思路是做一个夜间模式下的css文件，然后利用js判断本机计算机时间，如果事件在这个时间段就触发js，给html标签添加darkMode类，如果不在这个时间段就给html标签去掉这个类，以此来改变网页源码中的属性以实现夜间模式（如：背景颜色、字体颜色、模块透明度），另外引入了一个动画切换特效，来进行模式之间的转换。

白昼模式下

夜间模式下

第一步

  需要在首页添加一个切换的图标

光有这个这个图标还不行，因为它是触发js事件的开关，所以需要给他添加onlcick（鼠标点击事件）代码如下：

css代码

1.页面点击图标

<img src="image/dark.png" class="dayImg" style="width: 3rem;height: 3rem;position: fixed;bottom: 2rem;right: 0.5rem;z-index: 9999;cursor: pointer;" />

2.darkmode模式css代码和切换特效css代码

.darkMode body{
      background:black!important;//!important 使得这个代码强制使用，才能覆盖之前的css代码
      color: #9e9e9e!important;
}
/*.darkMode #beian{*/
    /*color:#AFEEEE!important;*/
/*        color:#40E0D0!important;*/
/*}*/
.darkMode p{
    /*color: #f0ffff!important;*/
    color: #9e9e9e!important;
}
.darkMode .container p{
    color: #9e9e9e!important;
}
.darkMode .bossdong-item{
    opacity: 0.7!important;
}
.darkMode .bossdong-item p,h3{
    color:white!important;
}
.darkMode .bossdong-item-bottom p{
    color: #9e9e9e!important;
}
.Cuteen_DarkSky,.Cuteen_DarkSky:before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 88888888;//因为想要让这个动画展示，其实质是将之前的网页遮挡，原理是让添加的动画盒子堆叠顺序排第一
}

.Cuteen_DarkSky {
    background: linear-gradient(#feb8b0,#fef9db)
}

.Cuteen_DarkSky:before {
    transition: 2s ease all;
    opacity: 0;
    background: linear-gradient(#4c3f6d,#6c62bb,#93b1ed)
}

.darkMode .Cuteen_DarkSky:before {
    opacity: 1;
}

.Cuteen_DarkPlanet {
    z-index: 99999999;
    position: fixed;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    -webkit-animation: CuteenPlanetMove 2s cubic-bezier(.7,0,0,1);
    animation: CuteenPlanetMove 2s cubic-bezier(.7,0,0,1);
    transform-origin: center bottom;
}

@-webkit-keyframes CuteenPlanetMove {
    0% {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes CuteenPlanetMove {
    0% {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.Cuteen_DarkPlanet:after {
    position: absolute;
    left: 35%;
    top: 40%;
    width: 9.375rem;
    height: 9.375rem;
    border-radius: 50%;
    content: "";
    background: linear-gradient(#fefefe,#fffbe8);
}

js代码

$(function(){
  var flag = 0;//节流阀，来控制图片点击触发的是增加darkmode属性还是去除darkmode属性
  var myDate = new Date;
    var h = myDate.getHours()+1;//获取当前小时数(0-23)
    var timer = setInterval(function(){  
      if(h>=6&&h<=19){//如果时间在6点到19点则移除darkmode类
        flag = 1;
        $(document.documentElement).removeClass("darkMode"); 
        // clearInterval(timer);
     
       }
      else{
        stopp();//停止樱花动画
        flag = 0;
        $(document.documentElement).addClass("darkMode");
        clearInterval(timer);
     }
  },1)
    console.log(flag);
    $(".dayImg").click(function(){
      clearInterval(timer);
        $('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($("body"));//添加这个div盒子，用来盛放特效
        if(flag ==1 ){
            $(document.documentElement).addClass("darkMode");          
            stopp();//关闭樱花 
            flag =0;     
        }
        else if(flag == 0){
            stopp();//关闭樱花
            $(document.documentElement).removeClass("darkMode");     
            flag = 1;
        }   
        setTimeout(function() { //模式切换后让这个动画从页面消失
           $(".Cuteen_DarkSky").fadeOut(1e3, function() {
              $(this).remove()
           })
        }, 2e3)
    })      
})