一为(onenav)主题导航 – 添加弹出问候语教程

主题美化2周前发布 云超
21 00

一为(onenav)主题导航 – 添加弹出问候语教程教程

代码添加路径:/wp-content/themes/onenav/footer.php

<!--问候语开始-->
  <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

 

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
none
暂无评论...