简单介绍
给网页引入该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