js设置默哀用全局灰度

1 思路

通过动态的新增/删除link标签，使js能操作是否引入css。

2 css文件内容

// 通过给html设置灰度滤镜，使全部样式变成灰色
html {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  _filter: none;
}

grayscale官方文档

3 新增/删除link标签的方法

// 加载css
export function loadCss(url) {
  const temp = document.createElement("link");
  temp.rel = "stylesheet";
  temp.type = "text/css";
  temp.href = url;
  document.getElementsByTagName("head")[0].appendChild(temp);
  console.log(temp);
}
// 卸载css
export function removeCss(url) {
  const links = document.getElementsByTagName("link");
  for (let index = 0; index < links.length; index++) {
    console.log(links[index].href, url, links[index].href.includes(url));
    if (links[index].href.includes(url)) {
      (links[index].parentNode as ParentNode).removeChild(links[index]);
      break;
    }
  }
}
const GRAYSCALE_FILE_PATH = "/public/static/css/grayscale.css";
// 设置全局灰度
export function settingGrayscale() {
  loadCss(GRAYSCALE_FILE_PATH);
}
// 清除全局灰度
export function clearGrayscale() {
  removeCss(GRAYSCALE_FILE_PATH);
}

4 业务代码（参考即可）

如果之前没有获取过灰度时间区间
如果现在时间大于了之前保存的灰度结束时间
则重新获取灰度时间的区间

如果新的灰度时间区间囊括了现在时间
则将全局样式加入灰色滤镜
否则取消

// 引入全局灰度函数和取消函数
import { settingGrayscale, clearGrayscale } from "@/utils/operation-css-link";
function judgmentGrayRange() {
  function getExpirationTime(nowTime) {
    // 获取新的时间区间
    const NEW_GRAY_TIME_INTERVAL_BEGIN = new Date().getTime(); // 获取后台设置的灰度到期时间，这里的new Date().getTime()是为了防止无限循环调用
    const NEW_GRAY_TIME_INTERVAL_END = new Date().getTime(); // 获取后台设置的灰度到期时间，这里的new Date().getTime()是为了防止无限循环调用
    localStorage.setItem(
      "GRAY_TIME_INTERVAL_BEGIN",
      NEW_GRAY_TIME_INTERVAL_BEGIN.toString(),
    );
    localStorage.setItem(
      "GRAY_TIME_INTERVAL_END",
      NEW_GRAY_TIME_INTERVAL_END.toString(),
    );
    if (
      nowTime > +NEW_GRAY_TIME_INTERVAL_BEGIN &&
      nowTime < +NEW_GRAY_TIME_INTERVAL_END
    ) {
      settingGrayscale();
    }
  }
  const GRAY_TIME_INTERVAL_BEGIN = localStorage.getItem(
    "GRAY_TIME_INTERVAL_BEGIN",
  );
  const GRAY_TIME_INTERVAL_END = localStorage.getItem("GRAY_TIME_INTERVAL_END");
  const NOW_TIME = new Date().getTime();
  // 第一次进入没有设置过缓存
  if (!GRAY_TIME_INTERVAL_BEGIN || !GRAY_TIME_INTERVAL_END) {
    getExpirationTime(NOW_TIME);
  }
  // 判断时间在灰度时间区间
  else if (
    NOW_TIME > +GRAY_TIME_INTERVAL_BEGIN &&
    NOW_TIME < +GRAY_TIME_INTERVAL_END
  ) {
    settingGrayscale();
  }
  // 时间不在区间
  else {
    clearGrayscale();
    getExpirationTime(NOW_TIME);
  }
}