给网站右下角添加一个问候语小功能

前言说明

通过以下代码，您可以在网站中实现一个简单的问候语小功能，该功能会根据访问用户的时间，在页面的右下角显示相应的问候语。无论是早晨、中午、下午还是晚上，用户都能够收到相应的问候，为用户提供更加个性化的体验。这段代码使用了HTML、CSS和JavaScript来实现，通过设置固定位置、动态显示和定时移除等方式，为网站增添了一份温馨的人性化关怀。

代码分享

<!--模板吧分享网站问候语-->
<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>