在一些具有特殊纪念意义的日期，许多网站会选择以灰色调展示，以此表达缅怀与敬意。本文将介绍一套适用于所有网站框架的通用代码，帮助实现指定日期自动变灰功能，同时也想提醒大家：此类功能的使用需心怀敬畏，坚守对历史和逝者的尊重。
在wordpress主题的functions.php 里 最后面添加
// 注册并加载灰色效果的脚本和样式
// 一秒云软件制作，www.okmg.cn
function enqueue_grayscale_scripts() {
// 注册CSS文件
wp_register_style(
'grayscale-style',
get_template_directory_uri() . '/grayscale-style.css',
array(),
'1.1', // 版本号更新
'all'
);
// 注册JS文件
wp_register_script(
'grayscale-script',
get_template_directory_uri() . '/grayscale-automation.js',
array(),
'1.1', // 版本号更新
true
);
// 加载样式和脚本
wp_enqueue_style('grayscale-style');
wp_enqueue_script('grayscale-script');
}
add_action('wp_enqueue_scripts', 'enqueue_grayscale_scripts');在functions.php 文件同级目录中创建 grayscale-automation.js 并把以下代码添加进去
// 检查当前日期是否为需要变灰的日期
// 默认设置了 每年的 7月31日 12月13日 自动变灰色。如需要其他时间请参考一下格式自行添加
// 一秒云软件制作 www.okmg.cn
function checkGrayscaleDate() {
const today = new Date();
const month = today.getMonth(); // 月份从0开始，0=1月，11=12月
const day = today.getDate();
// 需要变灰的日期：7月31日(6=7月)和12月13日(11=12月)
const isGrayscaleDate =
(month === 6 && day === 31) || // 7月31日
(month === 11 && day === 13); // 12月13日
const htmlElement = document.documentElement;
if (isGrayscaleDate) {
htmlElement.classList.add('grayscale-effect');
} else {
htmlElement.classList.remove('grayscale-effect');
}
}
// 页面加载时执行检查
document.addEventListener('DOMContentLoaded', checkGrayscaleDate);在functions.php 文件同级目录中创建 grayscale-style.css 并把以下代码添加进去。
/* 网站灰色效果样式 */.grayscale-effect { 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,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grayscale'%3E%3CfeColorMatrix 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'/%3E%3C/filter%3E%3C/svg%3E"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}以下是适用于所有网站框架（如 HTML 静态站、Vue、React、PHP、Java Web 等）的通用代码，无需依赖特定框架，只需添加到页面中即可实现指定日期自动变灰功能：
通用实现方案（3 步完成）
1. 添加 CSS 样式（控制灰色效果）
将以下代码添加到网站的全局 CSS 文件中（如style.css），或直接嵌入到页面的<style>标签内：
/* 灰色效果核心样式 */
html.gray-mode {
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* 兼容Chrome、Safari */
-moz-filter: grayscale(100%); /* 兼容Firefox */
-ms-filter: grayscale(100%); /* 兼容IE */
-o-filter: grayscale(100%); /* 兼容Opera */
filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grayscale'%3E%3CfeColorMatrix 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'/%3E%3C/filter%3E%3C/svg%3E"); /* 兼容旧版浏览器 */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* 兼容IE8及以下 */
-webkit-filter: grayscale(1);
}2. 添加 JavaScript 逻辑（判断日期并触发效果）
将以下代码添加到网站的全局 JS 文件中（如common.js），或直接嵌入到页面的<script>标签内（建议放在<body>底部，确保 DOM 加载完成）：
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 获取当前日期（月份从0开始，0=1月，11=12月）
const today = new Date();
const month = today.getMonth(); // 月份（0-11）
const day = today.getDate(); // 日期（1-31）
// 需要变灰的日期列表（可根据需求添加/修改）
// 格式：[月份, 日期]，例如[11,13]表示12月13日
const grayDates = [
[11, 13], // 12月13日（南京大屠杀死难者国家公祭日）
// 可添加其他固定日期，例如：
// [6, 31], // 7月31日（示例）
// 全国哀悼日为临时日期，需手动添加或通过后端接口动态获取
];
// 检查当前日期是否在变灰列表中
const isGrayDay = grayDates.some(date => {
return month === date[0] && day === date[1];
});
// 触发灰色效果
if (isGrayDay) {
document.documentElement.classList.add('gray-mode'); // 给<html>标签加灰色类
} else {
document.documentElement.classList.remove('gray-mode'); // 移除灰色类
}
});3. 嵌入到页面中
静态网站（HTML）：直接将 CSS 代码放在<head>的<style>标签内，JS 代码放在<body>结束前的<script>标签内。
Vue/React 等框架：将 CSS 添加到全局样式文件（如App.css），JS 代码可放在入口文件（如main.js）或根组件的mounted生命周期中。
后端渲染网站（PHP/Java 等）：将 CSS 和 JS 代码嵌入到母版页（如header.php、template.jsp），确保所有页面都能加载。
功能说明
自动判断：代码会自动检测当前日期，若匹配grayDates列表中的日期（如 12 月 13 日），网站会自动变为灰色；其他日期自动恢复正常。
兼容性：支持所有现代浏览器（Chrome、Firefox、Edge、Safari）及旧版 IE，无需担心框架差异。
可扩展：如需添加其他日期，只需在grayDates数组中按格式添加即可（例如[4, 5]表示 4 月 5 日）。
临时哀悼日：若遇临时全国哀悼日，可临时在grayDates中添加对应日期，生效后删除即可。
通过以上代码，任何框架的网站都能实现指定日期自动变灰功能，无需修改核心代码，简单高效。
二、重要提示
使用范围需严格遵守规定
网站变灰功能应仅用于国家法定的纪念日期（如 12 月 13 日南京大屠杀死难者国家公祭日）或国家临时设立的全国哀悼日，禁止随意用于其他日期，避免因滥用淡化纪念意义，造成不良社会影响。
心怀敬畏，尊重历史
这些特殊日期承载着民族记忆与情感，使用灰色调的核心是表达缅怀与敬意。在实现功能时，应确保效果庄重、统一，不添加任何与纪念主题无关的装饰或干扰元素。
关注官方通知，及时更新
全国哀悼日等临时日期需以国家相关部门的公告为准，若需添加此类日期，应在官方通知发布后及时更新代码，结束后及时移除，确保与国家要求保持一致。
通过以上代码，可实现网站在指定纪念日期自动变灰的功能。但请始终牢记：技术的使用应坚守社会责任感，让功能服务于对历史的铭记和对逝者的缅怀，这才是此类功能的核心意义。
