简单介绍

给网页引入该js脚本后,在配置中存在的日期到来时让网页变成灰白色。
可自行修改配置,为每个日期写下一些话语,并在网页中预留显示位置,这些话可在当天显示在指定位置。

使用方式

第一步:引入

方式一

复制下方代码,将其包含在<script></script>之间,然后放到网页的</body>前面。

方式二

将下方代码保存成一个文件,上传至web服务器,在网页的</body>前面插入<script src="文件地址"></script>

!function () {
    var arr = [
        { date: '4-4', info: '今天是全国哀悼日。\n大爱无声,大义无言,生者祈福,逝者哀悼。' },
        { date: '12-13', info: '今天是国家公祭日。\n昭昭前事,惕惕后人。永矢弗谖,祈愿和平。' },
    ];
    var now = new Date();
    var MM = now.getMonth() + 1;
    var DD = now.getDate();
    var date = MM + "-" + DD;
    arr.map(function (item) {
        if (item.date == date) {
            $('head').append('<style>html{filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}</style>');
            //var eulogy = document.getElementById("eulogy");
            //eulogy.innerText = item.info;
        }
    })
}();

第二步:配置

日期/悼词配置

嘿,看见代码块上边那个数组了吗,你可以修改已有的日期和悼词,也可以添加。

修改html(可选)

不做其他修改的话,在当天是不会显示悼词的,如果你需要悼词,那么看看你复制的js脚本,你会发现里面有两行是被双斜杠//注释掉的,现在把这四个斜杠删除。
然后在网页上做些手脚,给你要显示悼词的标签加上一个值为eulogy的id属性。示例:<p id="eulogy"></p>
3.清空浏览器缓存再刷新一遍网页吧,不出意外的话是成功了。

第三步(可选):兼容一言

对于本站,因为是抢占了一言的地方来显示悼词,所以会出现哪个内容就变成了随机答案。
修改主题代码又过于麻烦(主要是没有这个技能点)。
这里就用了一个取巧的办法,等网页加载完毕后才会执行该js。
不过由于主题启用了pjax,所以只有在用户直接访问首页时才会出现悼词。
以下是方法:将第一行的!function () {替换成window.onload=function() {,将最后一行的();删除,也就是说最后一行只有}

效果图

本站效果图

兼容性

未测试
如果觉得我的文章对你有用,请随意赞赏