个人成长计划

Ayiya

特殊日子全站变灰色

2025-09-18

只需将这段代码放在目标网站的 <head> 或 <body> 标签内即可无需依赖其他代码,它会独立检测日期并自动生效。推荐放在<head>标签内

如果你是Halo用户 可以在Halo后台→设置→代码注入→全局Head标签 内插入下述代码

<!-- 特殊日子改变颜色 -->
    <script>
        // 页面加载时执行日期检测
        window.onload = function() {
            // 定义特殊日期 [月份, 日期](注意:月份从0开始,1月=0,9月=8)
            const specialDays = [
                [3, 5],   // 4月5日
                [4, 12],   // 5月12日
                [8, 18],   // 9月18日
                [8, 30],   // 9月30日
                [11, 13],   // 12月13日
                // 可添加更多日期,例如 [11, 13] 表示12月13日
            ];
            
            const today = new Date();
            const month = today.getMonth(); // 0-11
            const day = today.getDate();    // 1-31
            
            // 检查是否为特殊日期
            const isSpecial = specialDays.some(([m, d]) => m === month && d === day);
            
            // 如果是特殊日期,添加灰度样式
            if (isSpecial) {
                document.documentElement.style.filter = 'grayscale(100%)';
                // 兼容各浏览器
                document.documentElement.style.webkitFilter = 'grayscale(100%)';
                document.documentElement.style.mozFilter = 'grayscale(100%)';
                document.documentElement.style.msFilter = 'grayscale(100%)';
            }
        };
    </script>

如觉觉得上面的代码又多又长可以试试这个效果都是一样的

我是代码小白感觉还是上面有注释的更适合我以免我忘记了😄

<script>
// 极简版:特殊日期判断与变灰
window.onload=()=>{
  const [m,d]=[new Date().getMonth(),new Date().getDate()];
  if([[3,5],[4,12],[8,18],[8,30],[11,13]].some(([mm,dd])=>mm===m&&dd===d)){
    Object.assign(document.documentElement.style,{
      filter:webkitFilter:mozFilter:'grayscale(100%)'
    });
  }
};
</script>

👇下面是实际效果

2025-09-18-rplcupsi.jpg

铭记历史

日期

事件

4月5日

清明节

祭祖扫墓、缅怀先人

5月12日

汶川大地震遇难日

缅怀汶川地震遇难者,传承抗震救灾精神

9月18日

九一八事变

铭记历史、勿忘国耻

9月30日

烈士纪念日

以国家名义缅怀英烈

12月13日

南京大屠杀死难者公祭日

铭记南京大屠杀历史,缅怀死难同胞,反对战争暴行

注:代码内容由豆包生成‘老卢’已亲测有效可用。