H5页面置灰

H5页面置灰

H5页面置灰

一些特殊时间需要把开发的H5页面置灰，比如前一段时间疫情哀悼一样；在此记录实现方法。

创建hui.css文件

文件内容如下

html,img {
    -webkit-filter: grayscale(1);/* Webkit */
    filter:gray;/* IE6-9 */
    filter: grayscale(1);/* W3C */
}
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

在页面js中设置置灰时间，在设定时间内引入hui.css

var curDate = new Date();
    var startDate = new Date("2020/04/04 00:01:00");
    var endDate = new Date("2020/04/04 23:59:59");
    // 区间时间
    if (curDate > startDate && curDate < endDate){
      // 加载灰色主题
      loadCss("hui.css");
    }
    // 动态加css
    function loadCss(url) {
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.type = "text/css";
      link.href = url;
      document.getElementsByTagName("head")[0].appendChild(link);
    }

当前页面应用置灰当前页面，一般的H5开发要所有页面都置灰，可以在全局的js中执行置灰操作，单页面应用不用考虑此问题。