如何用JavaScript实现指定日期后显示指定DIV？

云原生阿岚

2026-5-29

解决指定日期后显示文本的JavaScript问题

嘿，作为JavaScript新手能尝试迁移代码已经很棒啦！咱们先看看你现有代码里的问题，再给出简单靠谱的解决方案～

你现有JS代码的几个问题：

日期比较的语法完全错误：if (today > 0, 16, 2018) 这种写法根本不符合JS语法，而且你手动拼接的mm/dd/yyyy是字符串，直接和数字比较完全不对，甚至字符串之间的日期比较也容易出bug（比如"12/01/2017"字符串会比"01/17/2018"大，但实际日期更早）。
月份处理遗漏+笔误：JS的getMonth()返回0-11（1月是0），你没加1就拼接成了日期字符串；另外代码里的20018明显是笔误，应该是2018。
没有处理时分秒：原PHP代码是精确到小时（date('YmdH')），你的JS只处理了年月日，逻辑上和原代码不一致。

优化后的解决方案（和原PHP逻辑完全对齐）

其实不用手动拼接日期字符串，直接用JS的Date对象比较时间戳是最准确、最简单的方式：

1. 保持你的CSS隐藏逻辑（没问题）

.DateDiv { display: none; }

2. 保持目标DIV结构（没问题）

<div class="DateDiv">
  <h3>Please note that the deadline for submitting proposals has passed.</h3>
</div>

3. 修正后的JavaScript代码（jQuery版本，适配你的现有写法）

$(document).ready(function() {
  // 定义截止日期：2018年1月17日10点（对应原PHP的2018011710）
  // 注意：JS的月份是0索引，所以1月要写0，小时是24小时制
  const deadline = new Date(2018, 0, 17, 10);
  const currentTime = new Date();
  
  // 直接比较两个Date对象，JS会自动转成时间戳（毫秒数）对比
  if (currentTime > deadline) {
    $(".DateDiv").show();
  }
});

如果你不想用jQuery（纯JS版本）

如果Drupal环境里不想依赖jQuery，也可以这么写：

document.addEventListener('DOMContentLoaded', function() {
  const deadline = new Date(2018, 0, 17, 10);
  const currentTime = new Date();
  const dateDiv = document.querySelector('.DateDiv');
  
  if (currentTime > deadline) {
    dateDiv.style.display = 'block';
  }
});

为什么这个方法更好？

逻辑和原PHP完全一致：精确到小时对比，不会出现日期对但时间没到就显示的情况。
避免手动拼接的错误：不用自己处理补0、月份索引这些细节，Date对象会帮你搞定。
更可靠：时间戳对比是最准确的日期比较方式，不会出现字符串比较的逻辑bug。

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