简单介绍

给网页引入该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) {
            var gary = document.getElementsByTagName("body")[0];
            gary.style.cssText = "filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);";
            //var eulogy = document.getElementById("eulogy");
            //eulogy.innerText = item.info;
        }

    })
}();

第二步:配置

日期/悼词配置

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

修改html(可选)

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

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

方法一

window.onload=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) {
            var gary = document.getElementsByTagName("body")[0];
            gary.style.cssText = "filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);";
            //var eulogy = document.getElementById("eulogy");
            var eulogy = document.getElementsByClassName("indexWords")[0];
            eulogy.innerText = item.info;
        }

    })
}

本站使用handsome主题,一言区域的className为indexWords,所以简单粗暴地直接拿来用了。
因为是抢占了一言的地方来显示悼词,所以会出现哪个内容就变成了随机答案。
修改主题代码又过于麻烦(主要是没有这个技能点)。
这里就用了一个取巧的办法,等网页加载完毕后才会执行该js。
缺点是:由于主题启用了pjax,所以只有在用户直接访问首页时才会出现悼词。

其实最佳方法还是写一下pjax回调,但我不会(理直气壮),评论区等一个大佬。

方法二

目的同样是为了避免过多修改主题代码,避免升级主题之后又要进行一系列修改。
思路:直接关闭主题自带的一言,把一言和悼词集成在一起。

具体怎么做......懒,等大佬。

效果图

本站效果图

兼容性

未测试

更新日志

2022-12-01:改为原生js

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