代码整理-网站灰度(黑白)效果

说明

• 某些特定的日子你的网站可能需要首页变为黑白的效果以悼念某个伟人的逝世

操作步骤

核心思路

• css定义一个固定的class
• js判断当前页面的URL中的pathname是不是首页，如果是首页
  • 定义一个开始时间戳、一个结束时间戳，比如某一天的0点到24点
  • 获取当前时间戳，如果当前时间戳在开始和结束时间内，则给html添加定义好的class

代码

• css

  .html-gray {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
  }

• js

  // 首页黑白效果
  jQuery(document).ready(function ($) {
      var pathname = window.location.pathname;
  
      // 只有首页显示
      if (pathname === '/') {
          const startTime = 1669824000000;
          const endTime = 1669910399000;
          const nowTime = new Date().getTime();
          if (nowTime > startTime && nowTime < endTime) {
              // 兼容IE9及以下和谷歌
              $('html').addClass('html-gray');
              $('head').append('<style>*{filter:gray; color:gray;}</style>');
          }
      }
  });