页面变灰白以及定时返回彩色代码

最新推荐文章于 2022-12-08 09:46:29 发布

高然然----IT农名工

最新推荐文章于 2022-12-08 09:46:29 发布

阅读量551

点赞数

本文链接：https://blog.csdn.net/youtasa/article/details/105319509

版权

页面变灰白的css，兼容ie

 html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}
* { -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray; }
``
把页面在某一个特殊时刻自动变成彩色,这种方法，会使得页面刚加载时候显示灰色，过会儿调成彩色

```javascript
var newtimestamp = (new Date(" 2020/01/01 00:00:00")).getTime()/1000;   //特殊时刻
var timer  = setInterval(function(){
    var timestamp = new Date() / 1000;
    if (timestamp >= newtimestamp){
            $('html,*').css({ filter:'none' })
            clearInterval(timer)
    }
},1000)

还有一种动态设置灰白的方法，这种css部分没有定义 * ,ie 可能不兼容。

<script type="text/javascript">
    	var newtimestamp = (new Date(" 2020/04/05 00:00:10")).getTime()/1000;
var timestamp = new Date() / 1000;
    if (timestamp >= newtimestamp){
            console.log(timestamp,newtimestamp,'yes')
    }
    else{
        document.documentElement.setAttribute('style','-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)');
    }
</script>