使用setInterval时第二个JavaScript函数未执行的问题排查

核心错误原因 #

• 变量覆盖导致报错：display函数中，你先声明var date = new Date()创建日期对象，随后又用var date = date.getDate()将其覆盖为当前日期的数字值。后续调用date.getMonth()和date.getFullYear()时，数字类型没有这些方法，直接触发代码报错，无法执行DOM更新。
• 布局问题：#x的margin: 50%会将元素推至页面极下方，即使JS修复也可能无法看见内容。
• 时钟函数隐性bug：代码中使用了未定义的minute变量，实际应改为声明过的min，否则会引发控制台报错。

修复后的完整代码 #

HTML

<div id="time"></div>
<div id="x"></div>

CSS

body {
  background-color: red;
}

#time {
  color: white;
  font-size: 3vw;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-align: center;
  margin: 10% 0 5%;
}

#x {
  color: white;
  font-size: 3vw;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-align: center;
  margin: 0;
}

JavaScript

setInterval(function clock() {
  var date = new Date();
  var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday ", "Thursday", "Friday", "Saturday"];
  var day = date.getDay();
  var hour = date.getHours();
  var min = date.getMinutes();
  var sec = date.getSeconds();
  var Part = hour >= 12 ? 'PM' : 'AM';
  
  // 修复未定义变量问题
  if (hour == 0 && Part == 'PM') {
    if (min == 0 && sec == 0) {
      hour = 12;
      Part = 'Noon'
    } else {
      hour = 12;
      Part = 'PM'
    }
  }
  
  if (hour > 12) {
    hour = hour - 12;
  }
  
  // 补零处理，保证时分秒显示两位数字
  min = min.toString().padStart(2, '0');
  sec = sec.toString().padStart(2, '0');
  
  var curentday = '<br>Today is: ' + daylist[day];
  var time = 'Current time is : ' + hour + Part + ': ' + min + ': ' + sec + curentday;
  document.getElementById('time').innerHTML = time;
}, 1000);

setInterval(function display() {
  var now = new Date(); // 更换变量名避免覆盖
  var date = now.getDate();
  var month = now.getMonth() + 1;
  var year = now.getFullYear();
  
  // 调整为dd/mm/yy格式，补零并截取年份后两位
  date = date.toString().padStart(2, '0');
  month = month.toString().padStart(2, '0');
  var shortYear = year.toString().slice(-2);
  
  var fullDate = 'Current date is : ' + date + '/' + month + '/' + shortYear;
  document.getElementById('x').innerHTML = fullDate;
}, 1000);

额外优化说明 #

• 给日期、月份、时分秒添加padStart(2, '0')，确保始终显示两位数字（如1号显示为01，9分显示为09）
• 将日期分隔符改为/，匹配你要求的dd/mm/yy格式
• 调整CSS的margin值，让两个元素在页面正常展示

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