CSS、JS如何让网站变灰

文章正文还需 2 分钟

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院发布公告，决定2020年4月4日举行全国性哀悼活动
公司大多数是政府项目，所以单位也是接到了，需要把网站变黑白，自然的上面的任务也分发的我的头上了

先说一下，处理黑白在常规网站直接使用css即可，在处理ie10和ie11的时候由于不支持filter属性，所以需要使用js来处理，当然不用js，可使用svg

css

css 复制代码

body {
    filter: Gray;
}
img {
    filter: Gray;
}
html {
    filter: gray !important;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

ie10，ie11

引用grayscale.js

js 复制代码

<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>
<script>
  document.getElementById("body")
</script>

前端自动触发

当把上面的代码写完后，接到经理任务，问我能不能定时发布，然后就把js和css，通过动态的引入

js 复制代码

(function() {
    var state = true; //防止重复加载
    // 初始化
    function initBlackWhite() {
	// 需要执行的时间点 2020-4-4
        if (yearMonthDate() === '2020-4-4') {
            var ieVersion = IEVersion()
            if (state) {
                loadStyle('./blackwhite.css')
                if (ieVersion == 10 || ieVersion == 11) {
                    loadJS("./grayscale.js", function() {
                        grayscale(document.body);
			state = false;
                    });
                }else{
		    state = false;
		}
            }
        }
    }

    initBlackWhite()
    setInterval(function() {
        initBlackWhite()
    }, 1000)


    // 判断ie浏览器
    function IEVersion() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
        var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
        if (isIE) {
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            if (fIEVersion == 7) {
                return 7;
            } else if (fIEVersion == 8) {
                return 8;
            } else if (fIEVersion == 9) {
                return 9;
            } else if (fIEVersion == 10) {
                return 10;
            } else {
                return 6; //IE版本<=7
            }
        } else if (isEdge) {
            return 'edge'; //edge
        } else if (isIE11) {
            return 11; //IE11  
        } else {
            return -1; //不是ie浏览器
        }
    }

    // 动态引入css
    function loadStyle(url) {
        var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(link);
    }

    // 动态加载js
    function loadJS(url, callback) {
        var script = document.createElement('script'),
            fn = callback || function() {};
        script.type = 'text/javascript';
        //IE
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == 'loaded' || script.readyState == 'complete') {
                    script.onreadystatechange = null;
                    fn();
                }
            };
        } else {
            //其他浏览器
            script.onload = function() {
                fn();
            };
        }
        script.src = url;
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    // 获取当前时间
    function CurentTime() {
        var now = new Date();
        var hh = now.getHours();
        var mm = now.getMinutes();
        var ss = now.getTime() % 60000;
        ss = (ss - (ss % 1000)) / 1000;
        var clock = hh + ':';
        if (mm < 10) clock += '0';
        clock += mm;
        return (clock);
    }

    // 获取当前日期
    function yearMonthDate() {
        var date = new Date();
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
    }

})();

使用svg

html 复制代码

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: absolute;visibility: hidden;">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

<img src="./mm1.jpg" />
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="192">
    <image xlink:href="./mm1.jpg" x="0" y="0" width="256" height="192" filter="url('#grayscale')"></image>
</svg>

查看效果,更多参考请点击SVG滤镜实现

关于后记

写完上方代码以为大功告成，结果很出乎意料，除去常规浏览器，在ie系列浏览器中，在ie8中图片是背景引入的无法变灰，最终结果是把后端小哥拉着一起改，也算是把他坑了一把😅😅