使用CSS实现网页变灰效果

• 当有某些需求的时候，需要网页变成灰色，这个时候，就可以使用CSS提供的属性解决这个问题，
• 直接给html写样式

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

• 通过定义时间，在某一个时刻触发网页变灰效果

window.onload = function () {
    var date = new Date()
    var time = date.getTime(); //当前时间戳
    var style = document.createElement("style");
    style.type = "text/css";
    try {
        style.appendChild(document.createTextNode("*{filter: grayscale(100%);-webkit-filter: grayscale(100%)}"));
    } catch (ex) {
        style.styleSheet.cssText = "*{filter: grayscale(100%);-webkit-filter: grayscale(100%)}"; //针对IE
    }
    var stringTime = "2022-12-01 00:00:00"; //指定时间戳
    var timestamp = Date.parse(new Date(stringTime));
    if (time > timestamp) {
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(style);
    }
}