子比主题 – 网站不同时段温馨问候语弹窗

定位：后台子比主题设置–>>自定义代码–>>自定义头部HTML代码添加以下代码：

<div id="greetingBox"></div>

<style>
  #greetingBox {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    text-align: center;
    z-index: 10000;
    pointer-events: none;
    font-family: 'Microsoft YaHei', sans-serif;
  }
  .greeting {
    display: inline-block;
    position: relative;
    opacity: 0;
    top: -120px;
    padding: 12px 50px;
    border-radius: 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    color: #2c3e50;
    font-size: 15px;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    margin: 8px 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(6px);
    transform: scale(0.9);
    min-width: 280px;
  }
  .greeting.shown {
    opacity: 1;
    top: 0;
    transform: scale(1);
  }
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
  }
</style>

<script>
  (() => {
    const greetings = [
      {
        compliment: "太晚啦，还不睡的嘛！太厉害了叭！",
        start_time: 0,
        end_time: 5
      },
      {
        compliment: "早起的鸟儿有虫吃，您真自律呀！",
        start_time: 6,
        end_time: 9
      },
      {
        compliment: "状态很好，继续保持哦～",
        start_time: 10,
        end_time: 10
      },
      {
        compliment: "坚持到现在很棒啦，准备吃午饭叭！",
        start_time: 11,
        end_time: 11
      },
      {
        compliment: "午休是充电的好时机呢！",
        start_time: 12,
        end_time: 14
      },
      {
        compliment: "今天又是充实的一天呢！",
        start_time: 14,
        end_time: 18
      },
      {
        compliment: "晚餐要好好犒劳自己哦！",
        start_time: 19,
        end_time: 19
      },
      {
        compliment: "放松时间到，享受此刻的宁静吧～",
        start_time: 20,
        end_time: 24
      }
    ];
    const currentDate = new Date();
    const currentHour = currentDate.getHours();
    const currentMinute = currentDate.getMinutes().toString().padStart(2, '0');
    const greetingBox = document.querySelector("#greetingBox");
    const timeGreeting = `你好！很高兴在${currentHour}:${currentMinute}见到你呀！`;
    let compliment = "";
    for (const group of greetings) {
      if (currentHour >= group.start_time && currentHour <= group.end_time) {
        compliment = group.compliment;
        break;
      }
    }
    const messages = [timeGreeting];
    if (compliment) messages.push(compliment);
    const greetingElements = [];
    messages.forEach((msg, index) => {
      const greetingElement = document.createElement("div");
      greetingElement.className = "greeting";
      greetingElement.innerHTML = `
        <div style="position: relative;">
          ${msg}
          <div style="position: absolute; right: -25px; top: 50%; transform: translateY(-50%);">
            ${index === 0 ? '🕒' : '✨'}
          </div>
        </div>
      `;
      greetingBox.appendChild(greetingElement);
      greetingElements.push(greetingElement);
    });
    setTimeout(() => {
      greetingElements.forEach((element, index) => {
        setTimeout(() => {
          element.classList.add("shown");
          element.style.animation = "float 3s ease-in-out infinite";
        }, index * 550);
      });
    }, 800);
    setTimeout(() => {
      greetingElements.forEach(element => {
        element.style.animation = "none";
        element.classList.remove("shown");
        setTimeout(() => element.remove(), 600);
      });
      setTimeout(() => greetingBox.remove(), 1000);
    }, 4800);
  })();
</script>