menu Memories' Blog
search self_improvement
目录
无屏闪的黑夜模式实现
DNXRZL
DNXRZL 2022年06月27日  ·  阅读 1,157

小说一下

黑夜模式是我一直想要实现的功能,但之前写的黑夜模式在刷新时会有短暂的切换过程,会导致屏闪,所以,我就一直没有加入这个功能,今天捣鼓了一下,发现了一个方法实现的黑夜模式近乎完美,下面就来讲解一下。

原理分析

常规做法:等文档加载完成再执行js代码切换黑夜模式,有屏闪。
我的做法:加载到body标签后立即执行js代码,为其添加黑夜模式的类,无屏闪。

网页的加载是从上往下的,并且遇到<script>标签包裹的js代码会立即执行,然后接着加载下面内容,这样的话,我们就可以在<body>标签下面放<script>包裹的黑夜模式代码,执行后,会给<body>标签添加一个class=“类”,这个类就是黑夜模式的css样式,这样,一个完美的黑夜模式就实现了

一个例子

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  	<!--黑夜模式的核心代码-->
    <script src="darkMode.js"></script>
</head>
<body>
  <script>
    //判断之前有没有开启过黑夜模式,有则恢复之前的状态
    if(darkMode.getFlag('darkmode') != null){
           darkMode.firstDark();
     }
   <script>
    
............
</body>
</html>

黑夜模式Js

const darkMode = {
//下面三个函数分别是设置、移除、获取黑夜模式标志量的函数
  setFlag: function () {
    localStorage.setItem("darkmode", "yes");
  },
  removeFlag: function () {
    localStorage.setItem("darkmode", "no");
  },
  getFlag: function (key) {
    return localStorage.getItem(key);
  },

  setDark: function () {
    $("body").addClass("darkMode"); //为body添加类darkMode类
  },
  removeDark: function () {
    $("body").removeClass("darkMode"); //移除body的darkmode类
  },

  firstDark: function () { //每次刷新页面时对黑夜模式状态的判断和恢复
    if (this.getFlag("darkmode") == "yes") {
      this.setDark();
    } else {
      this.removeFlag();
      this.removeDark();
    }
  },
  clickDark: function () { // 按钮点击切换黑夜模式
    $(".darkButton").on("click", () => {
      if (this.getFlag("darkmode") == "no") {
        this.setFlag();
        this.setDark();
      } else {
        this.removeFlag();
        this.removeDark();
      }
    });
  },
};

!(function () {
  document.addEventListener("DOMContentLoaded", () => {
    darkMode.clickDark();
  });
})();

分类: 学习笔记
标签: web前端