网页在特殊日子一键变灰

<template>  <div :class="{ grayscale: isGrayscale }">  <!-- 你的页面内容放在这里 -->  </div>  
</template> 
<script>  
export default {  data() {  return {  // 存储哀悼日的数组  aidaoriDates:["0404", "0512", "0807", "0909", "1213"],  ,  // 当前日期  currentDate: new Date()  };  },  computed: {  // 计算属性,判断是否应该应用灰度效果  isGrayscale() {  const mm = String(this.currentDate.getMonth() + 1).padStart(2, '0'); // 月份补0  const dd = String(this.currentDate.getDate()).padStart(2, '0'); // 日期补0  const today = `${mm}${dd}`; // 组合成月份日期字符串  return this.aidaoriDates.includes(today); // 检查当前日期是否在哀悼日数组中  }  },  mounted() {  // 如果需要,你可以在这里设置一个定时器来每天检查是否需要应用灰度效果  // 例如,每天凌晨检查一次  // 注意:这只是一个简单示例,实际项目中可能需要更复杂的逻辑来处理日期变更和性能优化  // setInterval(() => {  //   this.currentDate = new Date();  // }, 86400000); // 一天后再次检查(86400000毫秒等于一天)  },  watch: {  // 监听currentDate的变化,并更新isGrayscale计算属性  currentDate: {  handler() {  this.$forceUpdate(); // 强制Vue重新渲染组件,因为currentDate是数据属性而不是响应式依赖  },  deep: true // 深度监听,因为currentDate是一个对象  }  }  
};  
</script>  
<style scoped>  
.grayscale {  filter: grayscale(100%);  /* 根据需要添加其他浏览器特定的滤镜 */  -webkit-filter: grayscale(100%);  -moz-filter: grayscale(100%);  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";  -o-filter: grayscale(100%);  
}  
</style>

效果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/729281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker学习入门

1、docker简介 docker官网&#xff1a; www.docker.com dockerhub官网&#xff1a; hub.docker.com docker文档官网&#xff1a;docs.docker.com Docker是基于Go语言实现的云开源项目。 Docker的主要目标是&#xff1a;Build, Ship and Run Any App, Anywhere(构建&…

1.2_2 OSI参考模型

文章目录 1.2_2 OSI参考模型一、概述&#xff08;一&#xff09;ISO/OSI参考模型是怎么来的&#xff1f;&#xff08;二&#xff09;ISO/OSI参考模型&#xff08;三&#xff09;ISO/OSI参考模型解释通信过程 二、各层功能及协议&#xff08;一&#xff09;应用层&#xff08;第…

oss-fuzz-gen:一款基于LLM的模糊测试对象生成与评估框架

关于oss-fuzz-gen oss-fuzz-gen是一款基于LLM的模糊测试对象生成与评估框架&#xff0c;该工具可以帮助广大研究人员使用多种大语言模型&#xff08;LLM&#xff09;生成真实场景中的C/C项目以执行模糊测试。 该工具基于Google的OSS-Fuzz平台实现其功能&#xff0c;并对生成的…

蓝桥OJ 2942数字王国之军训排队 DFS剪枝

蓝桥OJ 2942数字王国之军训排队 #include<bits/stdc.h> using namespace std;const int N 15;//最多10队 int a[N], n; vector<int>v[N];//二维数组 v[i]记录队伍i中所有人的编号bool dfs(int cnt, int dep) {if (dep n1){//判断合法性for (int i 1; i < n; …

Spring揭秘:BeanDefinitionRegistry应用场景及实现原理!

内容概要 BeanDefinitionRegistry接口提供了灵活且强大的Bean定义管理能力&#xff0c;通过该接口&#xff0c;开发者可以动态地注册、检索和移除Bean定义&#xff0c;使得Spring容器在应对复杂应用场景时更加游刃有余&#xff0c;增强了Spring容器的可扩展性和动态性&#xf…

【C++那些事儿】函数重载与C++中的“指针“——引用

君兮_的个人主页 即使走的再远&#xff0c;也勿忘启程时的初心 C/C 游戏开发 Hello,米娜桑们&#xff0c;这里是君兮_&#xff0c;我之前看过一套书叫做《明朝那些事儿》&#xff0c;把本来枯燥的历史讲的生动有趣。而C作为一门接近底层的语言&#xff0c;无疑是抽象且难度颇…

为什么RTX 4090更受欢迎

RTX 4090作为顶级显卡&#xff0c;凭借高性能和高图形处理能力&#xff0c;特别适合游戏、专业图形设计和人工智能领域&#xff0c;备受专业游戏玩家和高性能计算需求开发者的青睐。 RTX 4090高速复杂的计算能力 RTX 4090 GPU拥有 760 亿个晶体管、16384 个 CUDA 核心和 24 GB…

nestjs10.x使用jwt生成token

1 安装依赖&#xff1a; pnpm install --save nestjs/jwtpnpm install passport passport-jwt nestjs/jwtpnpm install types/passport-jwt --save-dev 2 可以使用命令新建auth鉴权文件夹 nest g mo auth // auth.module.ts nest g s auth // auth.service.ts nest g co …

杠杆和保证金有什么关系?WeTrade众汇一个公式讲清楚

在交易中杠杆其实就是一种期权&#xff0c;它能增加交易者作为抵押品的资金&#xff0c;以建立和维持头寸。 例如&#xff0c;1:100的操作杠杆&#xff0c;在这种情况下&#xff0c;意味着开立1000单位基础货币的头寸&#xff0c;交易者将需要少100倍的资金&#xff0c;即10个…

C++常量和变量

甲流疫情死亡率 甲流并不可怕&#xff0c;在中国&#xff0c;它的死亡率并不是很高。根据截至2009年12月22日各省报告的甲流确诊数和死亡数&#xff0c;计算甲流在各省的死亡率 输入 一行&#xff0c;有两个整数&#xff0c;第1个为确诊数&#xff0c;第2个为死亡数 输出 一…

学习Java的第四天

目录 一、if选择结构 1、基本if选择结构 语法结构&#xff1a; 流程图&#xff1a; 示例&#xff1a; 2、if-else 选择结构 语法结构&#xff1a; 流程图&#xff1a; 示例&#xff1a; 3、多重if选择结构 语法结构&#xff1a; 流程图&#xff1a; 示例&#xff1a…

【Docker】若依ruoyi项目部署

一 搭建局域网 1 # 搭建net-ry局域网&#xff0c;用于部署若依项目docker network create net-ry --subnet172.68.0.0/16 --gateway172.68.0.1 # 注意1&#xff1a;关闭宿主机的防火墙&#xff0c;否者容器内部的MySQL、redis等服务&#xff0c;外部访问不了&#xff1b;开放…

【REST2SQL】12 REST2SQL增加Token生成和验证

【REST2SQL】01RDB关系型数据库REST初设计 【REST2SQL】02 GO连接Oracle数据库 【REST2SQL】03 GO读取JSON文件 【REST2SQL】04 REST2SQL第一版Oracle版实现 【REST2SQL】05 GO 操作 达梦 数据库 【REST2SQL】06 GO 跨包接口重构代码 【REST2SQL】07 GO 操作 Mysql 数据库 【RE…

Docker_搭建跨服务器网络通讯(swarm 集群)

本文目录 一、如何搭建docker的跨服务器网络1、在主服务器上初始化docker swarm 集群2、其他服务器节点加入到创建好的集群中3、检验集群是否搭建成功4、创建overlay类型的docker网络 二、如何部署服务1、docker部署2、docker-compose部署 一、如何搭建docker的跨服务器网络 1…

《小学科学》是什么级别的期刊?是正规期刊吗?能评职称吗?

问题解答&#xff1a; 问&#xff1a;《小学科学》期刊是正规期刊吗&#xff1f; 答&#xff1a;是正规期刊&#xff0c;下面会有具体介绍 问&#xff1a;《小学科学》期刊是什么级别的&#xff1f; 答&#xff1a;省级&#xff1b;主管单位&#xff1a;长春出版传媒集团有…

unicloud 创建云函数并使用云函数

云函数是什么 云函数即在云端&#xff08;服务器端&#xff09;运行的函数。 从 HBuilderX 3.4起&#xff0c;新增了云函数的扩展版&#xff0c;云对象。 开发者无需购买、搭建服务器&#xff0c;只需编写代码并部署到云端即可在客户端&#xff08;App/Web/小程序等&#xf…

【Linux】第一个小程序--进度条

这篇博客要综合利用以前的知识&#xff0c;来实现一个进度条程序~ 目录 换行&回车 缓冲区 实现简单的倒计时 实现进度条 version1 version2 在开始写这个小程序之前&#xff0c;我们先学习一些预备知识&#xff1a; 换行&回车 缓冲区 在我们运行这个程序时&…

如何阅读“计算机界三大神书”之一 ——《计算机程序的构造和解释》SICP

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

STM32CubeMX学习笔记17--- FSMC

1.1 TFTLCD简介 TFT-LCD&#xff08;thin film transistor-liquid crystal display&#xff09;即薄膜晶体管液晶显示器。液晶显示屏的每一个像素上都设置有一个薄膜晶体管&#xff08;TFT&#xff09;&#xff0c;每个像素都可以通过点脉冲直接控制&#xff0c;因而每个节点都…

论文阅读:Scalable Diffusion Models with Transformers

Scalable Diffusion Models with Transformers 论文链接 介绍 传统的扩散模型基于一个U-Net骨架&#xff0c;这篇文章提出了一种新的扩散模型结构&#xff0c;将U-Net替换为一个transformer&#xff0c;并将这种结构称为Diffusion Transformers (DiTs)。他们还发现&#xff…