WordPress网站右下角添加问候语提示代码

博主看到他们不少人都为WordPress添加了问候语,但是都是显示在页面的顶部,我觉得容易遮挡其他元素和存在时间很短,于是改了代码,让其显示在页面右下角并且显示五秒的时间。

20240512134835285-image

可以修改代码,改成自己专属问候语,或者插入一些表情,符号,大家觉得怎么好看怎么来。

引用代码:

将代码放到主题后台的自定义代码中,或者插入到主题foot底部php的页脚代码内即可。这个不用我教吧,那么简单!

<!--道言分享网首页问候-->
<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
喜欢就支持一下吧
点赞10打赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容