网站在指定日期变灰色的代码，wordpress和通用版本

⚡

DeepSeek - AI生成摘要

在一些具有特殊纪念意义的日期，许多网站会选择以灰色调展示，以此表达缅怀与敬意。本文将介绍一套适用于所有网站框架的通用代码，帮助实现指定日期自动变灰功能，同时也想提醒大家：此类功能的使用需心怀敬畏，坚守对历史和逝者的尊重。 wordpress版本在wordpress主题的functions.php 里最后面添加 // 注册并加载灰色效果的脚本和样式 // 一秒云软件制作，www.okmg.c

在一些具有特殊纪念意义的日期，许多网站会选择以灰色调展示，以此表达缅怀与敬意。本文将介绍一套适用于所有网站框架的通用代码，帮助实现指定日期自动变灰功能，同时也想提醒大家：此类功能的使用需心怀敬畏，坚守对历史和逝者的尊重。

wordpress版本

在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 日南京大屠杀死难者国家公祭日）或国家临时设立的全国哀悼日，禁止随意用于其他日期，避免因滥用淡化纪念意义，造成不良社会影响。

心怀敬畏，尊重历史

这些特殊日期承载着民族记忆与情感，使用灰色调的核心是表达缅怀与敬意。在实现功能时，应确保效果庄重、统一，不添加任何与纪念主题无关的装饰或干扰元素。

关注官方通知，及时更新

全国哀悼日等临时日期需以国家相关部门的公告为准，若需添加此类日期，应在官方通知发布后及时更新代码，结束后及时移除，确保与国家要求保持一致。

通过以上代码，可实现网站在指定纪念日期自动变灰的功能。但请始终牢记：技术的使用应坚守社会责任感，让功能服务于对历史的铭记和对逝者的缅怀，这才是此类功能的核心意义。

DeepSeek 推理问答

如问我这篇文章讲了什么。这篇文章是什么意思等。

声明：注意：本站部分图片由：https://unsplash.com/ 提供
**免责声明**
本网站所载的所有文章内容仅供参考，不构成任何形式的专业建议、意见或判断依据。对于本网站提供的开源代码及免费下载的代码，用户应仅将其用于个人学习、研究或非商业目的，并应在下载后合理期限内完成必要的使用或评估。本网站明确要求用户不得将这些代码用于任何商业用途。
本网站对于所提供的开源代码及免费下载的代码仅用于分享参考，版权归原作者所有。本网站坚决支持并维护软件著作权持有人的合法权益，并强调对原著者的尊重与保护，不会将这些代码用于任何形式的商业盈利目的。
本网站内图片素材、文章内容部分来源于网络收集转载，如有侵权，请联系我们以便及时处理。联系方式：meng#yimiaonet.com（请将“#”替换为“@”）。
未经本网站书面许可，任何个人或组织不得复制、盗用、采集、发布或以其他方式传播本网站的内容至任何形式的网站、书籍、媒体平台或其他公共领域。若本网站内容涉及对原著者合法权益的侵犯，原著者或本网站有权采取法律措施维护自身权益。
本声明由一秒云软件中心发布，并保留随时修改本声明的权利。官方网站信息如下：本站网站：2024.okmg.cn。“OKMG”为本网站注册商标，受法律保护。

{{userData.name}}已认证

进销存哪家好？点可云进销存系统专业推荐

高效管理仓库的利器：点可云进销存软件全面解析

开源免费的企业管理利器：点可云进销存V6（NodCloud）推荐

如何选择适合企业的进销存系统？移动端与独立部署全解析