利用JavaScript实现网页特定时间自动改变CSS效果

在网页设计中，有时需要在特定日期或时间段内对页面进行一些特殊的展示效果。本文将介绍一种利用JavaScript设置指定日期/时间，使HTML页面的CSS样式自动变为灰色的方法。

首先，在HTML中设置好需要变灰的元素，可以通过CSS来实现这一效果。接下来，在JavaScript中编写代码，可以利用日期对象来获取当前时间，并判断是否处于指定日期/时间段内。如果是，则可以通过JavaScript修改CSS样式，从而实现自动变灰的效果。

新建一个js文件将下面代码复制进去，调用js即可。

[lv]

// 定义多行文本的数组
var cssContent = [
    '.htmlgray-filter {',
    '  filter: grayscale(100%);',
    '  -webkit-filter: grayscale(100%);',
    '  -moz-filter: grayscale(100%);',
    '  -ms-filter: grayscale(100%);',
    '  -o-filter: grayscale(100%);',
    '  filter: url("data:image/svg+xml;utf8,#grayscale");',
    '  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);',
    '  -webkit-filter: grayscale(1);',
    '}',
];

// 通过创建style标签元素来添加CSS样式
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.innerHTML = cssContent.join('');
document.head.appendChild(styleElement);

// 判断是否为国家公祭日，如果是，则启用灰度滤镜效果
var date = new Date();
var nowMonth = date.getMonth() + 1;
var nowDay = date.getDate();
var nowDate = nowMonth + '-' + nowDay;
var nationalMemorialDayArray = ['4-4', '5-12', '12-13'];

if (nationalMemorialDayArray.includes(nowDate) && location.pathname=='/') {
    document.documentElement.classList.add('htmlgray-filter');
}

[/lv]

解释：在每年的4月4日、5月12、12月13号这三个日期，将页面的css设置成htmlgray-filter