如何在活动举办前一天自动高亮展示日程类网站中的对应活动

核心逻辑 #

• 统一所有活动日期的存储/输出格式，推荐用标准YYYY-MM-DD格式或毫秒级时间戳，避免格式不匹配导致的判断误差
• 计算得到「当前日期+1天」的结果，和所有活动的举办日期做匹配
• 给匹配成功的活动条目追加提前定义好的高亮CSS类即可

前端动态实现方案（前后端分离/静态页面场景） #

先提前定义高亮样式：

.activity-highlight {
  background: #fff8e6;
  border-left: 4px solid #ff9500;
  padding: 10px 14px;
  font-weight: 500;
}

页面加载后自动判断加高亮：

// 日期格式化工具，统一输出YYYY-MM-DD格式
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 计算明天的日期
const tomorrowDate = formatDate(new Date(Date.now() + 24 * 60 * 60 * 1000));

// 遍历所有活动条目，匹配就加高亮类
document.querySelectorAll('.activity-item').forEach(item => {
  // 活动日期存在DOM的自定义属性data-event-date中，格式为YYYY-MM-DD
  if (item.dataset.eventDate === tomorrowDate) {
    item.classList.add('activity-highlight');
  }
});

服务端渲染实现方案 #

如果是服务端直接渲染页面，可直接在模板渲染阶段完成判断，无需前端二次处理，加载即可见效果，示例为EJS模板场景：

<% 
// 服务端计算明天的日期，注意和活动日期时区保持一致
const tomorrowDate = new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().split('T')[0];
%>

<% activities.forEach(act => { %>
  <div class="activity-item <%= act.eventDate === tomorrowDate ? 'activity-highlight' : '' %>">
    <h3><%= act.title %></h3>
    <p>举办时间：<%= act.eventDate %></p>
  </div>
<% }) %>

注意事项 #

• 如果活动面向多时区用户，建议统一用UTC时间计算日期，避免不同时区用户看到的高亮状态不一致
• 有精确活动开始时间的场景，可以把判断逻辑调整为当前时间距离活动开始时间小于24小时就高亮，适配更灵活的需求
• 开启页面缓存的场景建议把缓存时效设置为1小时以内，或者优先用前端动态判断的方案，避免缓存导致高亮不更新

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