WordPress右下角添加问候语
前言
看到他们不少人为WordPress添加了问候语,但是都是显示在页面的顶部,我觉得容易遮挡其他元素和存在时间很短,于是改了代码,让其显示在页面右下角并且显示五秒
代码
将代码放到主题后台的自定义代码中的页脚代码内即可。
<!--首页问候-->
<div id="greetingBox"></div>
<style>
#greetingBox {
position: fixed;
bottom: 10px;
right: 15px;
width: 400px;
text-align: right;
z-index: 10000;
pointer-events: none
}
#greeting {
display: inline-block;
position: relative;
opacity: 0;
bottom: -110px;
padding: 5px 40px;
border-radius: 50px;
background-color: #fff;
color: #000;
font-size: small;
transition: .5s;
box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
}
#greeting.shown {
opacity: 1;
bottom: 0
}
</style>
<script>
(() => {
const greeting = [
{
realNode: {
greeting: "您好,今天过得怎么样?",
start_time: 0,
end_time: 11
}
},
{
realNode: {
greeting: "中午好👋, 记得好好吃午饭哦",
start_time: 11,
end_time: 13
}
},
{
realNode: {
greeting: "下午好👋, 希望你下午工作顺利",
start_time: 13,
end_time: 18
}
},
{
realNode: {
greeting: "晚上好👋, 在属于自己的时间好好放松😌~",
start_time: 18,
end_time: 24
}
}
];
let e = greeting.length !== 0 ? greeting : [
// 默认问候语数组
];
let t = document.createElement("div");
t.id = "greeting";
setTimeout(() => {
t.classList.add("shown");
}, 1000);
let i = document.querySelector("#greetingBox");
i.appendChild(t);
const n = new Date().getHours();
let r = "";
for (let t = 0; t < e.length; t++) {
if (n >= e[t].realNode.start_time && n < e[t].realNode.end_time) {
r = e[t].realNode.greeting;
break;
}
}
t.innerHTML = r;
setTimeout(() => {
t.classList.remove("shown");
setTimeout(() => {
i.remove();
}, 500);
}, 5000);
})();
</script>
阅读剩余
THE END