html/css/vue根据时间全站自动变灰

1. 当年时间-全站变灰2. 如果要设置每年固定日期变灰（我这里只设置了国家公祭日(南京)和汶川地震）2.1这里演示在vue项目中如何使用vue-cli中使用Nuxt中使用 3. 如果单单想试试效果最后如果用到的小伙伴，点个赞鸭（最好来个关注😊😊😊😊）

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

1. 当年时间-全站变灰

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

// 1.得到当前的时间var nowTime = new Date().getTime();// 2.设置结束的时间 是 4月5号凌晨var overTime = new Date('/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:33return 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: "/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共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。