如何用JavaScript计算提交日期距今日天数并按规则修改文本颜色

1 调整HTML结构 #

原有HTML存在标签未闭合、嵌套不规范、缺少可识别元素选择器的问题，修正后代码如下：

<p id="displayText">提交状态文本</p>
<form id="dateForm">
  <input type="date" id="date" name="date" required>
  <input type="submit" value="提交">
</form>

这里给展示文本加了id="displayText"方便JS选中修改样式，用form标签包裹输入项方便监听提交事件，加了required属性防止空提交。

2 编写JavaScript逻辑 #

直接在HTML底部插入script标签即可运行，完整逻辑代码如下：

// 选中需要操作的DOM元素
const form = document.getElementById('dateForm');
const displayText = document.getElementById('displayText');
const dateInput = document.getElementById('date');

// 监听表单提交事件
form.addEventListener('submit', function(e) {
  // 阻止表单默认提交刷新页面的行为
  e.preventDefault();
  
  // 处理日期数据，将时分秒统一设为0避免时间误差
  const submitDate = new Date(dateInput.value);
  submitDate.setHours(0, 0, 0, 0);
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  
  // 计算两个日期的间隔天数
  const diffTime = today - submitDate;
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
  
  // 根据间隔天数修改文本颜色
  if (diffDays > 10) {
    displayText.style.color = 'red';
  } else if (diffDays > 5) {
    displayText.style.color = 'yellow';
  } else {
    // 小于等于5天恢复默认黑色
    displayText.style.color = 'black';
  }
  
  // 可选：将间隔天数同步展示在文本中
  displayText.textContent = `提交已过${diffDays}天`;
});

逻辑说明 #

• 日期计算时统一重置时分秒为0，避免因为当前时间早于提交日期的时间点，导致天数计算少1天的问题
• 条件判断从大到小匹配，大于10天的优先级高于大于5天，避免逻辑判断错误
• 用preventDefault()阻止form默认的页面跳转行为，保证功能在当前页面生效

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