您的位置:首页 > 建站知识 > JS > 网页秒变灰色方法
网页秒变灰色方法
2023-03-26来源:建站素材网 别来无恙 823  ]

重大事件,表示哀悼,通常会开启灰度模式,即网站打开没有丰富的色彩,只有黑白灰,具体方法如下:方法一:通过js可以设定指定时间,自动变灰以及复原(复制到网站后台统计代码处),方法二:直接使用CSS处理,不能设置时间,只能手动去除。

重大事件,表示哀悼,通常会开启灰度模式,即网站打开没有丰富的色彩,只有黑白灰,具体方法如下:

方法一:通过js可以设定指定时间,自动变灰以及复原(复制到网站后台统计代码处)

<script>
    // 1.得到当前的时间
    var nowTime = new Date().getTime();
    // 2.设置结束的时间 是 2022年12月07号凌晨
    var overTime = new Date('2022/12/07 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>


方法二:直接使用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>


评论列表
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?
    别来无恙 2023-03-26
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!
    路人甲 2023-03-26
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复
    网页秒变灰色方法
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!
    薪火千叶 2023-03-26
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员
    网页秒变灰色方法
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?
    别来无恙 2023-03-26
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管
    网页秒变灰色方法
发表评论