当然可以实现！这两个需求都能通过前端的状态跟踪 + 持久化存储来搞定，我给你拆解一下具体方案：

核心思路是记录上次显示div的时间，每次页面加载时判断当前时间与上次显示时间的间隔是否超过你设定的阈值，只有超过时才显示。因为刷新页面后内存变量会重置，所以我们用localStorage来持久化存储这个时间戳。

举个例子，假设你想每隔60分钟显示一次id为target-div的元素：

// 定义显示逻辑
function showDivAtInterval(intervalMinutes = 60) {
  const lastShownTime = localStorage.getItem('lastDivShownTime');
  const now = Date.now();
  const intervalMs = intervalMinutes * 60 * 1000; // 转成毫秒

  // 判断是否满足显示条件
  if (!lastShownTime || now - parseInt(lastShownTime) > intervalMs) {
    const targetDiv = document.getElementById('target-div');
    if (targetDiv) {
      targetDiv.style.display = 'block'; // 显示div
      // 可选：5秒后自动隐藏
      setTimeout(() => {
        targetDiv.style.display = 'none';
      }, 5000);
    }
    // 更新上次显示时间
    localStorage.setItem('lastDivShownTime', now.toString());
  }
}

// 页面加载时执行检查
window.addEventListener('load', () => {
  showDivAtInterval(60); // 传入你想要的间隔分钟数
});

这个需求的核心是跟踪两个状态：当前时段、上次显示问候的时段+日期。因为跨天之后即使是同一个时段（比如第二天早上），也需要重新显示问候，所以我们还要记录日期。

具体步骤：

1. 写一个函数判断当前属于哪个时段（早上/下午/晚上）
2. 从localStorage读取上次显示的状态
3. 如果当前日期变了，或者时段和上次不同，就显示对应问候并更新状态；否则不显示

代码示例：

// 1. 获取当前时段
function getCurrentGreetingPeriod() {
  const hour = new Date().getHours();
  if (hour >= 6 && hour < 12) return 'morning';
  if (hour >= 12 && hour < 18) return 'afternoon';
  return 'evening';
}

// 2. 显示问候语的函数
function displayGreeting(period) {
  const greetingMap = {
    morning: '早上好',
    afternoon: '下午好',
    evening: '晚上好'
  };
  const greetingDiv = document.getElementById('greeting');
  if (greetingDiv) {
    greetingDiv.textContent = greetingMap[period];
    greetingDiv.style.display = 'block';
    // 可选：3秒后自动隐藏
    setTimeout(() => {
      greetingDiv.style.display = 'none';
    }, 3000);
  }
}

// 3. 核心逻辑：判断是否需要显示问候
function showGreetingIfNeeded() {
  const currentPeriod = getCurrentGreetingPeriod();
  const today = new Date().toDateString(); // 用日期字符串区分不同天
  const lastGreetingData = localStorage.getItem('lastGreeting');

  // 第一次访问，直接显示并记录状态
  if (!lastGreetingData) {
    displayGreeting(currentPeriod);
    localStorage.setItem('lastGreeting', JSON.stringify({ 
      period: currentPeriod, 
      date: today 
    }));
    return;
  }

  // 解析上次的状态
  const { period: lastPeriod, date: lastDate } = JSON.parse(lastGreetingData);
  // 日期变化 或者 时段切换，就显示新问候
  if (today !== lastDate || currentPeriod !== lastPeriod) {
    displayGreeting(currentPeriod);
    localStorage.setItem('lastGreeting', JSON.stringify({ 
      period: currentPeriod, 
      date: today 
    }));
  }
  // 否则什么都不做，刷新页面也不会重复显示
}

// 页面加载时执行
window.addEventListener('load', showGreetingIfNeeded);

补充说明 #

• localStorage是域名级别的存储，同一个域名下的所有页面都会共享这些状态，刚好符合你的需求；
• 如果需要清除状态（比如测试时），可以打开浏览器控制台，执行localStorage.removeItem('lastGreeting')或者localStorage.clear()；
• 如果你是在单页应用（比如Vue/React）中开发，也可以用框架自带的状态管理工具（如Vuex、Redux）结合本地存储来实现，逻辑是一样的。

内容的提问来源于stack exchange，提问作者Abhi