社区 › 站长资源 › 给网站右下角添加一个问候语小功能

七夏 发表于 2024-5-10 21:38:50

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

自动在右下角显示提示语，5秒后关闭。
代码在下面，添加到网页源代码中即可。

<!--首页问候-->
<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.realNode.start_time && n < e.realNode.end_time) {
            r = e.realNode.greeting;
            break;
      }
    }
    t.innerHTML = r;
    setTimeout(() => {
      t.classList.remove("shown");
      setTimeout(() => {
            i.remove();
      }, 500);
    }, 5000);
})();
</script>

hMFsX 发表于 2024-5-12 20:54:12

挺好的，试试看

SanS三石 发表于 2024-6-29 13:23:11

滴~绝版卡，打卡成功！楼主辛苦了，祝楼主：越来越牛批💥，打卡时间：2024年06月29日 13:23:11

查看完整版本: 给网站右下角添加一个问候语小功能