网页在特殊日子一键变灰

news2024/12/24 10:14:50

<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>