jQuery实现指定日期页面变灰代码

jQuery实现指定日期页面变灰代码！网站页面实现页面变灰效果！近两天随着前领导人去世，全网基本上很多大网站都实现了首页背景颜色变灰的情况，有的是使用js实现，有的是用css显示的页面变灰，更多是网站首页显示背景灰色，其他页面显示正常的颜色。

下面分别记载的是如何使用Css实现页面变灰和jquery指定日期页面变灰。

纯Css页面变灰代码

<style type="text/css">
    body * {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        filter: gray;
    }
</style>

把以上Css代码放在html中的head标签内，即可实现页面变灰的效果，但是不能实现定时的效果，如果我们需要只让网站首页实现变灰的效果，直接在以上的Css前面加一个if页面判断即可，判断是否是网站首页，如果是网站首页就让首页变灰。

jQuery指定日期页面变灰

<script>
if(huise()){
$("html").css({
"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%)"
});
}

function huise(){
var huisearr=new Array("0403","0404","0405","0406","0414","0512","0807","0909","1213","1201","1202","1203","1204","1205","1206");
//日期格式以月份加日期格式
var mydate = new Date();
var str = "";
var mm = mydate.getMonth()+1;
if(mydate.getMonth()>9){
str += mm;
}else{
str += "0" + mm;
}
if(mydate.getDate()>9){
str += mydate.getDate();
}else{
str += "0" + mydate.getDate();
}
if(huisearr.indexOf(str)>-1){
return 1;
}else{
return 0;
}
}
</script>

jQuery指定日期页面变灰注意事项：

• 以上代码放在引入的jQuery库后面，否则就不会生效；
• 如果需要添加特殊的日期，可以在huisearr数组内按照日期格式新增日期，这样在到了这些日期的时候整个页面就会变成灰色，不在这些日期范围内的时候，页面就会正常显示。

和上面Css实现首页显示灰色的方法一样，只用在以上的Js代码前面做个If页面判断即可实现只让网站首页显示灰色。

以下是在本地的phpstudy网站项目中测试的效果图：

以上记载和介绍的两种页面变灰的方法，Css方法实现页面变灰虽说是十分简单，但是对于用户体验来说还是有些不友好，当我们用的时候去添加，不用的时候再删除掉，操作起来是十分不方便，而jQuery指定日期显示页面变灰的方法更加方便，遇到自己设定的日期的时候才会显示灰色，不是自己指定的日期则页面正常显示。