Javascript setInterval（callback，ms）在控制台中工作，但不操纵DOM，为什么？

我想创建一个简单的倒计时项目，其中有一个目标日期，我必须计算从现在起到那个日期还有多少天、小时、分钟和秒。当我用setInterval（）测试我的代码时，它会显示在控制台中，所以它可以工作，但为什么setInterval不会每秒钟改变屏幕上的时间呢

//变量DOM
const days=document.getElementById（'day'））
const hours=document.getElementById（'hour'））
const minutes=document.getElementById（'minutes'）
const seconds=document.getElementById（'second'）
const endDateDisplay=document.getElementById（'endDateDisplay'）；
//数天和数月的静态DB
const daysList=[
“星期一”，
"星期日",，
"星期二",，
“星期三”，
"星期四",，
“星期五”，
“星期六”，
“星期日”
]
常量月列表=[
“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”
]
//声明当前日期和目标日期
const startDate=新日期（）；
const endDate=新日期（'05/08/2021/03:00'）；
函数显示屏幕（）{
//今天和目标时间之间的差异（毫秒）
让remainingTime=endDate.getTime（）-startDate.getTime（）；
//为便于解决，将测量值从毫秒改为秒
设measureDrifferinSeconds=parseInt（剩余时间/1000）；
//在sub之后，分别查找距离目标时间还有多少天、小时、分钟和秒
const leftDays=measureDrifferinSeconds/60/60/24；
MeasuredDrifferinSeconds=MeasuredDrifferinSeconds-数学楼层（左侧天数）*60*60*24
const leftHours=measureDrifferinSeconds/60/60；
MeasuredOfferinSeconds=MeasuredOfferinSeconds-数学楼层（左小时）*60*60；
const leftMins=measureDrifferinSeconds/60；
MeasuredOfferinSeconds=MeasuredOfferinSeconds-数学楼层（左分钟）*60；
const leftSec=measureDrifferinSeconds；
//左时间显示为零
如果（剩余天数<10天）{
days.innerHTML=“0”+数学地板（leftDays）+“：”；
}否则{
days.innerHTML=Math.floor（leftDays）+“：”；
}
如果（左小时<10）{
hours.innerHTML=“0”+数学地板（leftHours）+“：”；
}否则{
hours.innerHTML=Math.floor（leftHours）+“：”；
}如果（左分钟<10）{
minutes.innerHTML=“0”+数学地板（leftMins）+“：”；
}否则{
minutes.innerHTML=Math.floor（leftMins）+“：”；
}如果（左秒<10）{
seconds.innerHTML=“0”+数学地板（leftSec）；
}否则{
seconds.innerHTML=Math.floor（leftSec）；
}
//零的结束日期显示
让endHourZeroCheck=“”
让endMinZeroCheck=''
if（endDate.getHours（）<10）{
endHourZeroCheck='0'+endDate.getHours（）；
}否则{
endHourZeroCheck=endDate.getHours（）
}
if（endDate.getMinutes（）<10）{
endMinZeroCheck='0'+endDate.getMinutes（）；
}否则{
endMinZeroCheck=endDate.getMinutes（）
}
endDateDisplay.innerHTML=`${daysList[endDate.getDay（）]}，${endDate.getDate（）}${MonthList[endDate.getMonth（）]}，${endDate.getFullYear（）}，${endHourZeroCheck}:${endMinZeroCheck}`
log（'set timeout call'）；
}
设置间隔（显示屏，1000）

重复会议：回顾
结束于

00:
00:
00:
00

如果在调试器中检查流程，您会注意到所有内容都在更新，只是

remainingTime

始终具有相同的值。由于

startDate

和

endDate

设置了一次，并且在初始加载后不会更改，

remainingTime

在每次运行

displayScreen

时具有相同的值。

因为

remainingTime

不是

endDate-startDate

而是

endDate-now

注意：根据“”，您可能可以使用前导零填充。稍微清理一下您的计算：

constlz=v=>Math.floor（v.toString（）.padStart（2,0）；const time=endDate-Date.now（）；days.textContent=lz（时间/86400000）+“：”；hours.textContent=lz（时间/3600000%24）+“：”；minutes.textContent=lz（时间/60000%60）+“：”；seconds.textContent=lz（时间/1000%60）@Quentin，我不确定这怎么会是那个问题的重复。这里的问题不是找不到某些元素，而是“更新”总是向DOM呈现相同的值。@UlviEnzo第一件事是一个实用函数，如果需要（
lz
）可以添加前导零。关于语法：。还有大数字：
86400000===1000*60*60*24
噢，谢谢，当我把startDate和endDate放在函数中时，它工作了。@UlviEnzo:函数中不需要
endDate
，因为它的值是常量。只有在每次调用块时更改的值（例如函数体、循环体）才应进入块中。“不变值”（每次块调用时不变的值）应该在块之外。这是该概念的应用之一。