今天是4.4疫情哀悼日,纪念疫情期间牺牲的烈士和逝世同胞,因此大部分网站颜色都变灰色了,我们前端是如何实现的呢?

核心原理,使用css3的滤镜效果即可,filter grayscale 将整个界面变为黑白灰色调, 是CSS3新功能

方式1:  通过js可以设定指定时间,自动变灰以及复原


注意:以下代码需要引入jquery

<script>
    // 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%)',
        'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)',
        '_filter': 'none'
      });
    }
  </script>

没有添加代码前:

添加代码后:


方式2:  直接使用CSS处理,但是不能设置时间

<style>
    html {
      /* 滤镜效果 */
      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);
    }
  </style>

这里深切哀悼抗击新冠肺炎疫情牺牲烈士和逝世同胞, 加油武汉,加油中国。

 

2020.4.4号全国疫情哀悼日网页变灰色前端是如何实现的?-pink老师的更多相关文章

  1. 彩色网页变黑白色CSS代码变黑白色调!

    <style> html { -webkit-filter: grayscale(%); -moz-filter: grayscale(%); -ms-filter: grayscale( ...

  2. C#实例 武汉肺炎全国疫情实时信息图

    如果需要查看更多文章,请微信搜索公众号 csharp编程大全,需要进C#交流群群请加微信z438679770,备注进群, 我邀请你进群! ! ! --------------------------- ...

  3. 【微信公众号】微信关于网页授权access_token和普通access_token的区别及两种不同方式授权

    微信官网网址:https://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html#.E9.99.84.EF.BC.9A.E6. ...

  4. 【python疫情可视化】用pyecharts开发全国疫情动态地图,效果酷炫!

    一.效果演示 我用python开发了一个动态疫情地图,首先看下效果: 如图所示,地图根据实时数据通过时间线轮播的方式,动态展示数据的变化.随着时间的推移,疫情确诊数量的增多,地图各个省份颜色逐渐加深, ...

  5. 微信公众号_订阅号_微信JS-SDK网页开发

    微信JS-SDK( 分享接口很常用 ) 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包 借助微信高效使用相机.语音.选题.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.支付等 ...

  6. 全国疫情精准定点动态更新(.net core)

    前言 疫情远比我们在年初想的发展迅速,在过年前还计划着可以亲戚聚聚,结果都泡汤了,开始了自家游. 在初三的时候,看到那个丁香医生,觉得不够详细,比如说我想看下周边城市的疫情情况,但是我地理不好,根本不 ...

  7. echarts全国疫情统计可视化地图(第一阶段)

    DBUtil.java package com.helloechart; import java.sql.Connection; import java.sql.DriverManager; impo ...

  8. TeXstudio 2020显示行号(与之前的版本位置不太一样)

  9. python+echarts+flask实现对全国疫情数据的爬取并可视化展示

    用Python进行数据爬取并存储到数据库,3.15学习总结(Python爬取网站数据并存入数据库) - 天岁 - 博客园 (cnblogs.com) 通过echarts+flask实现数据的可视化展示 ...

随机推荐

  1. java网络编程——socket实现简单的CS会话

    还记得当年学计网课时用python实现一个简单的CS会话功能,这也是学习socket网络编程的第一步,现改用java重新实现,以此记录. 客户端 import java.io.*; import ja ...

  2. IDEA Messages Build总是自动弹出提示错误

    IDEA,总是在代码未完成时,在进行切换页面回来后会跳出Messages Build,我相信大家在写java web项目的时候,经常会遇到这个问题,接下来我就和大家说一下问题所在. 主要原因是因为我们 ...

  3. disruptor 入门 一

    一.disruptor基本概念 https://www.cnblogs.com/haiq/p/4112689.html 二.disruptor入门程序 导入disruptor包 <depende ...

  4. django 从零开始 5 数据库模型创建

    进入应用项目下的models.py文件 自带一个导入的包 from django.db import models 使用这个包创建models模型 我这是要创建一个图站 ,所以模型设置并不复杂(路径配 ...

  5. selenium中js定位

    学习selenium的时候经常用扫的定位方式WebDriver定位方式,但是一些Windows的窗口就无力了,这时候可以用js定位 使用js定位的时候是用DOM树定位方式 eg: document.g ...

  6. 三星最先进EUV产线投用

    近日,三星宣布,在韩国华城工业园新开一条专司 EUV(极紫外光刻)技术的晶圆代工产线 V1,最次量产 7nm. 据悉,V1 产线/工厂 2018 年 2 月动工,2019 年下半年开始测试晶圆生产,首 ...

  7. R时间序列分析实例

    一.作业要求 自选时间序列完成时间序列的建模过程,要求序列的长度>=100. 报告要求以下几部分内容: 数据的描述:数据来源.期间.数据的定义.数据长度. 作时间序列图并进行简单评价. 进行时间 ...

  8. 初识JVM:(二)Java的垃圾回收机制详解

    声明:本文主要参考https://www.cnblogs.com/codeobj/p/12021041.html 仅供个人学习.研究之用,请勿用于商业用途,如涉及侵权,请及时反馈,立刻删除. 一.Ja ...

  9. (转)GNU风格ARM汇编语法指南(非常详细)4

    原文地址:http://zqwt.012.blog.163.com/blog/static/12044684201011148226622/ 4.GNU汇编语言定义入口点 汇编程序的缺省入口是_sta ...

  10. File类的构造方法:三种重载形式(新手)

    //导入的包.import java.io.File;//File类的构造方法 三种重载形式//创建的一个类.public class zylx1 { //公共静态的主方法. public stati ...