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