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