创建自适应弹窗 v2.2 – 集成用户IP地址与个性化问候语-故渊渡

本文代码由故渊渡编写；格式由阿里-通义千问编写

目标

本教程将指导你如何通过HTML、CSS和JavaScript创建一个自适应弹窗，该弹窗在加载网页后会显示用户的IP地址以及根据日期和时间提供个性化的问候语

步骤一：HTML结构与引用JS文件

在HTML文档的<head>部分引入JS文件（如果选择外链），然后在<body>标签内放置一个用于存放弹窗内容的<div>元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应弹窗实例 v2.2</title>
    <!-- 若采用外部JS文件，这里引入 -->
    <!-- <script src="heylie.js"></script> -->
</head>
<body>
    <!-- 弹窗内容容器 -->
    <div id="user_info_popup"></div>

    <!-- 将JS代码块放在页面底部，确保DOM已加载 -->
    <script>
        // 这里粘贴JS代码
    </script>
</body>
</html>

步骤二：编写JavaScript代码

在<script>标签内编写如下JavaScript代码：

<script>
// 获取用户IP地址的异步函数
async function getIpAddress() {
  const IP_SERVICES = [
    'https://ipapi.co/json/',
    'https://api.ipify.org/?format=json',
  ];

  for (const serviceUrl of IP_SERVICES) {
    try {
      const response = await fetch(serviceUrl);
      if (!response.ok) continue;

      const data = await response.json();
      return data.ip;
    } catch (error) {
      console.error(`Error fetching from ${serviceUrl}:`, error);
    }
  }

  return '未知';
}

// 存储特殊节日祝福语的对象
const specialGreetings = {
  '1-1': '元旦 - 愿你在新的一年里充满活力，幸福美满！',
  '2-2': '世界湿地日 - 愿我们的地球更加美好，湿地永远充满生机！',
  '2-10': '国际气象节 - 愿气象信息为我们的生活带来便利，天气晴朗！',
    '2-14': '情人节 - 愿天下有情人终成眷属，爱情甜蜜！',
    '3-5': '学雷锋纪念日 - 向雷锋同志学习，助人为乐，无私奉献！',
    '3-8': '妇女节 - 致敬伟大的女性，愿你们永远美丽、健康、快乐！',
  // ... 其他节日祝福语补充
};

// 根据日期和时间段显示祝福语的函数
function getGreetingText() {
  const now = new Date();
  const currentMonth = now.getMonth() + 1;
  const currentDay = now.getDate();

  // 检查是否为特殊节日并返回对应祝福语

  if (specialGreetings[`${currentMonth}-${currentDay}`]) {

    return `今天是：${specialGreetings[`${currentMonth}-${currentDay}`]}`;

  }

  // 非特殊节日，根据时间段显示普通祝福语
  const hour = now.getHours();
  if (hour >= 6 && hour < 12) {
    return '早上好，祝您有个美好的一天！';
  } else if (hour >= 12 && hour < 18) {
    return '下午好，祝您工作顺利，心情愉快！';
  } else if (hour >= 18 && hour < 22) {
    return '晚上好，祝您晚餐愉快，放松身心！';
  } else {
    return '深夜了，早点休息哦，祝您有个好梦！';
  }
}

// 显示用户信息的函数，包含IP地址、当前时间和祝福语
async function showUserInfo() {
  const ipAddress = await getIpAddress();
  const currentTime = getCurrentTime();

  const greeting = getGreetingText();

// 修改showUserInfo函数中的message定义
const message = `亲爱的访客您好！\n\n当前时间是：${currentTime}\n您的IP地址是：${ipAddress}\n\n${greeting}`;

  alert(message);
}

// 获取当前时间并格式化的函数
function getCurrentTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = ("0" + (now.getMonth() + 1)).slice(-2);
  const day = ("0" + now.getDate()).slice(-2);
  const hours = ("0" + now.getHours()).slice(-2);
  const minutes = ("0" + now.getMinutes()).slice(-2);
  const seconds = ("0" + now.getSeconds()).slice(-2);
  return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
}

// 调用函数展示用户IP地址和相关信息
(async () => {
  await showUserInfo();
})();
</script>