今天就给大家推荐会定时自动灰变的网页代码,在设定日0时0分0秒网站就会自动变成灰色的。

{alert type="success"}方法很简单,只需在网站 head 中加入以下代码即可,其中 var days 为灰变日期,可自行添加修改。
{/alert}

<script>
// 今日日期
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const today = `${month}.${day}`;
// 当天标识 key
const visitKey = `memorial_visit_${year}_${month}_${day}`;

// 哀悼/公祭日列表
const memorialDays = [
 {date:'12.13',name:'南京大屠杀死难者同胞',startYear:2013,title:'今天是{name}第{year}个国家公祭日',desc:'铭记历史,祈愿和平。'},
 {date:'5.12',name:'汶川大地震',startYear:2008,title:'今天是{name}第{year}周年纪念日',desc:'悼念遇难同胞,致敬抗震救灾英雄。'},
 {date:'7.7',name:'七七事变',startYear:1937,title:'今天是{name}第{year}周年',desc:'勿忘国耻,铭记历史,珍爱和平。'},
 {date:'9.9',name:'毛泽东同志逝世',startYear:1976,title:'今天是{name}第{year}周年',desc:'缅怀伟人,传承精神。'},
 {date:'9.18',name:'九一八事变',startYear:1931,title:'今天是{name}第{year}周年',desc:'警钟长鸣,勿忘国耻。'},
 {date:'4.14',name:'青海玉树地震',startYear:2009,title:'今天是{name}第{year}周年',desc:'悼念遇难同胞,祈愿平安。'},
 {date:'8.8',name:'舟曲特大泥石流',startYear:2010,title:'今天是{name}第{year}周年纪念日',desc:'深切悼念舟曲特大泥石流遇难同胞,缅怀在灾害中失去的生命。'},
 {date:'9.30',name:'烈士纪念日',startYear:2013,title:'今天是中华人民共和国第{year}个{name}',desc:'缅怀英烈,致敬英雄。'}
];

// 提示弹窗
function showToast(options){
  const el = document.createElement('div');
  el.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;padding:14px 24px;border-radius:6px;font-size:14px;z-index:99999;max-width:90%;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.3);';
  el.innerHTML = `<div style="font-weight:bold;margin-bottom:6px;">${options.title}</div><div>${options.message}</div>`;
  document.body.appendChild(el);
  setTimeout(()=>{
    el.style.opacity='0';
    el.style.transition='opacity .5s';
    setTimeout(()=>el.remove(),600)
  },15000);
}

// 匹配纪念日
memorialDays.forEach(day => {
  if(day.date === today){
    // 页面置灰 不受首次访问限制,当天一直灰
    const style = document.createElement('style');
    style.innerHTML = 'html{filter:grayscale(100%) !important;}';
    document.head.appendChild(style);

    // 判断:今日是否已经弹过窗,没弹过才弹
    if(!localStorage.getItem(visitKey)){
      const diff = year - day.startYear;
      const title = day.title.replace('{year}', diff).replace('{name}', day.name);
      
      window.addEventListener('load', () => {
        showToast({ title: title, message: day.desc });
        // 标记今日已访问,不再重复弹窗
        localStorage.setItem(visitKey, '1');
      });
    }
  }
});
</script>