本站在允许 JavaScript 运行的环境下浏览效果更佳


在国家公祭日自动将网站变灰

56

前言

cdn刷新有延迟,所以我想写个能自动在当日切换的样式
网络上搜到不能满足我的需求,所以自己写了个

使用方法

将以下代码放入html文件的head标签内即可在国家公祭日(12月13日)自动将页面变灰

代码解释

javascript部分是在每天12月31日给html标签加上theme-mode属性并且赋值为'gary'
css样式是把theme-mode属性为'gary'html标签变灰

代码

<script type="text/javascript">
    var date = new Date()
    var month = date.getMonth() + 1
    var day = date.getDate()
    if (month == 12 && day == 13) {
        document.documentElement.setAttribute("theme-mode", "gray");
    }
</script>

<style type="text/css">
    html[theme-mode="gray"] {
        /*webkit*/
        -webkit-filter: grayscale(100%);
        /*firefox*/
        -moz-filter: grayscale(100%);
        /*ie9*/
        -ms-filter: grayscale(100%);
        /*opera*/
        -o-filter: grayscale(100%);
        /*ie*/
        filter: grayscale(100%);
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }
</style>

注意事项

如果你的html标签中刚好有theme-mode属性,请将代码中出现的两处theme-mode换成其他的词