vue/Nuxt实现当年或每年哀悼日网站全站变灰

文前推荐一下👉前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具):
站点入口：http://luckycola.com.cn/
图床：https://luckycola.com.cn/public/dist/#/imghub
多种API：https://luckycola.com.cn/public/dist/#/
ChatAI：https://luckycola.com.cn/public/dist/#/chatAi
AI思维导图神器：https://luckycola.com.cn/public/dist/#/aiQStore/aiMindPage

---

友情提示:此篇代js码基于jQuery实现

---

1. 当年时间-全站变灰

• 如果是设置当年的事件(以疫情为例)

	// 1.得到当前的时间
	var nowTime = new Date().getTime();
	// 2.设置结束的时间 是 2020年4月5号凌晨
	var overTime = new Date('2020/04/05 00:00:00').getTime();
	// 3.如果当前时间小于了结束时间，简单说就是当前时间还没到4.5号 零点
	if (nowTime < overTime) {
	// 4.把html 设置灰色滤镜，并处理兼容
	$("html").css({
	'-webkit-filter': 'grayscale(100%)',
	'-moz-filter': 'grayscale(100%)',
	'-ms-filter': 'grayscale(100%)',
	'-o-filter': 'grayscale(100%)',
	// ie滤镜
	'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)',
	// ie6 等低版本浏览器不需要加滤镜
	'_filter': 'none' });
	}

注意:如果在开发项目时,此代码需放在全局才可以实现自动执行

2. 如果要设置每年固定日期变灰（我这里只设置了国家公祭日(南京)和汶川地震）

2.1这里演示在vue项目中如何使用

• 先放js代码(处理时间自动执行)

注意这个是每年的事件
这里我已经提前试了一下其他的时间格式，似乎不可以~~
伙伴们可以直接CV大法了

	// 1.得到当前的时间（时间戳）
	function DateFormat() {
	  let date = new Date(),
	    currentDate,
	    currentTime,
	    seperator = "-", // 如果想要其他格式 只需 修改这里
	    month = date.getMonth() + 1,
	    day = date.getDate(),
	    hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
	    minute =
	      date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
	    second =
	      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
	  month >= 1 && month <= 9 ? (month = "0" + month) : "";
	  day >= 0 && day <= 9 ? (day = "0" + day) : "";
	  //当前 日期
	  currentDate = month + seperator + day;
	  //当前 时间
	  currentTime = hour + ":" + minute + ":" + second;
	  // 输出格式 为 8-27 14:45:33
	  return currentDate + " " + currentTime;
	}
	var nowTime = DateFormat();
	// 2.设置南京事件公祭日
	var NJ_country_startTime = "12-13 00:00:00";
	var NJ_country_overTime = "12-14 00:00:00";
	//2.设置汶川哀悼开始及结束 是 5月12号凌晨
	var earthquake_startTime = "05-19 00:00:00";
	var earthquake_overTime = "05-22 00:00:00";
	// 3.将变灰封装到一个函数里，需要的时候再调用
	function grey() {
	  $("html").css({
	    "-webkit-filter": "grayscale(100%)",
	    "-moz-filter": "grayscale(100%)",
	    "-ms-filter": "grayscale(100%)",
	    "-o-filter": "grayscale(100%)",
	    // ie滤镜
	    filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",
	    // ie6 等低版本浏览器不需要加滤镜
	    _filter: "none"
	  });
	}
	//在这判断时间，时间字符串可以直接判断大小，不过要精确到秒
	if (nowTime >= NJ_country_startTime && nowTime <= NJ_country_overTime) {
	  // 4.把html 设置灰色滤镜
	  grey();
	} else if (nowTime >= earthquake_startTime && nowTime <= earthquake_overTime) {
	  // 4.把html 设置灰色滤镜
	  grey();
}

vue-cli中使用

• vue-cli的话，可以把这个js文件放在plugins下
  像这样：
  
  然后再main.js全局引入就行，前提你已经配置了jQuery

import './plugins/lament_grey.js'

Nuxt中使用

• 一种像上面一样放在plugins下,然后去nuxt.config.js下配置一下
  
  把上面的名字改一下，哈哈我比较懒(element-ui改成lament_grey)
• 也可以放在static下面
  
  然后去nuxt.config.js下配置一下,就ok了

head:{
//...............此处省略其他的head中配置...............
   script: [
      {
        src: "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
      },
      {
        src: "/lament_grey.js"
      }
    ]
 }

3. 如果单单想试试效果

在css上直接加

  html,body {
	      /* 滤镜效果 */
	      filter: grayscale(100%);
	      /* webkit内核 */
	      -webkit-filter: grayscale(100%);
	      /* 火狐内核 */
	      -moz-filter: grayscale(100%);
	      /* 微软内核 */
	      -ms-filter: grayscale(100%);
	      /* 欧朋内核 */
	      -o-filter: grayscale(100%);
	      /* ie专有滤镜 */
	      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	    }

技术源于追求

最后如果用到的小伙伴，点个赞鸭（最好来个关注😊😊😊😊）

更多推荐：wantLG的《普歌-码上鸿鹄团队:在Nuxt(vue)渲染模板中使用mock.js随机生成数据》

---

• 作者：wantLG
• 本文源自：wantLG的《普歌-码上鸿鹄团队：vue实现当年或每年哀悼日网站全站变灰》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。