自动开启哀悼模式：在国家公祭日致敬逝者

前端

2023-10-14 21:07:38

在国家公祭日开启哀悼模式：一个技术指南

在国家公祭日，向失去的生命致敬并表达我们的哀思至关重要。为此，许多应用程序和网站都会将主页变为黑白，以示纪念。为了参与这一有意义的传统，本文将介绍一个简单的脚本，可以在指定日期自动将网页变为黑白。

脚本概述

这个脚本利用了 JavaScript 的强大功能，可以操纵网页的样式。它通过添加一个 CSS 类来更改网页元素的颜色，从而实现黑白效果。该脚本可在任何支持 JavaScript 的网页上运行，使其成为实现哀悼模式的通用解决方案。

实现步骤

要实现自动哀悼模式，请按照以下步骤操作：

创建脚本文件： 创建一个新文件并将其命名为 "mourning-mode.js"。
添加脚本代码： 将以下代码复制并粘贴到文件中：

// 定义目标日期
const mourningDate = new Date("December 13, 2023");

// 创建一个观察器，在目标日期触发函数
const observer = new MutationObserver(function(mutations) {
  if (new Date() >= mourningDate) {
    // 在目标日期，添加 CSS 类以启用黑白模式
    document.documentElement.classList.add("mourning-mode");
  }
});

// 观察 "body" 元素，等待目标日期
observer.observe(document.body, { childList: true });

// 创建 CSS 类以定义黑白模式
const style = document.createElement("style");
style.innerHTML = ".mourning-mode { filter: grayscale(100%); }";
document.head.appendChild(style);