Javascript 倒计时计时器-在一页中使用多次

我试图在wordpress页面中使用此倒计时：

它可以继续工作，但我需要在同一页中多次使用它

document.getElementById（“计时器”）

我试图更改为

document.getElementsbyClassName（“计时器”）

，但没有成功

我错过什么了吗

函数更新程序（）{
future=Date.parse（“2021年6月11日11:30:00”）；
现在=新日期（）；
diff=未来-现在；
天数=数学下限（差值/（1000*60*60*24））；
小时=数学楼层（差值/（1000*60*60））；
分钟=数学楼层（差值/（1000*60））；
秒=数学楼层（差异/1000）；
d=天；
h=小时-天*24；
m=分钟-小时*60；
s=秒-分钟*60；
document.getElementById（“计时器”）
.innerHTML=
''+d+'天'+
''+h+'小时'+
''+m+'分钟'+
''+s+'秒'；
}
setInterval（'updateTimer（）'，1000）
正文{
文本对齐：居中；
填充：70px 50px；
背景#0D1A29；
字体系列：“Helvetica Neue”、“Open Sans”、Helvetica、arial、Sans serif；
}
#计时器{
字号：3em；
字号：100；
颜色：白色；
文本阴影：0 0 20px#48C8FF；
div{
显示：内联块；
最小宽度：90px；
跨度{
颜色：#B1CDF1；
显示：块；
字体大小：.35em；
字体大小：400；
}
}
}
使用类名选择时，@CBroe试图说：

Array.from(document.getElementsByClassName("timer")).forEach(el => {
    el.innerHTML =
      '<div>' + d + '<span>days</span></div>' +
      '<div>' + h + '<span>hours</span></div>' +
      '<div>' + m + '<span>minutes</span></div>' +
      '<div>' + s + '<span>seconds</span></div>' ;
});

Array.from（document.getElementsByClassName（“timer”））.forEach（el=>{
el.innerHTML=
''+d+'天'+
''+h+'小时'+
''+m+'分钟'+
''+s+'秒'；
});
我用'querySelectorAll（）做了一个工作示例，并在上面循环

注意：您还需要将div的id更改为class，将css中的de id选择器更改为class选择器


函数更新程序（）{
console.log（）
future=Date.parse（“2020年6月11日11:30:00”）；
现在=新日期（）；
diff=未来-现在；
天数=数学下限（差值/（1000*60*60*24））；
小时=数学楼层（差值/（1000*60*60））；
分钟=数学楼层（差值/（1000*60））；
秒=数学楼层（差异/1000）；
d=天；
h=小时-天*24；
m=分钟-小时*60；
s=秒-分钟*60；
document.querySelectorAll（'.timer'）.forEach（（el）=>{
el.innerHTML=
''+d+'天'+
''+h+'小时'+
''+m+'分钟'+
''+s+'秒'；
});
}
setInterval（'updateTimer（）'，1000）
正文{
文本对齐：居中；
填充：70px 50px；
背景#0D1A29；
字体系列：“Helvetica Neue”、“Open Sans”、Helvetica、arial、Sans serif；
}
.计时器{
字号：3em；
字号：100；
颜色：白色；
文本阴影：0 0 20px#48C8FF；
div{
显示：内联块；
最小宽度：90px；
跨度{
颜色：#B1CDF1；
显示：块；
字体大小：.35em；
字体大小：400；
}
}
}



您需要使用元素数组，并为每个元素更改文本。
但是最好为specify
future创建类或函数

您的计时器阵列演示：


函数更新程序（）{
future=Date.parse（“2020年6月11日11:30:00”）；
现在=新日期（）；
diff=未来-现在；
天数=数学下限（差值/（1000*60*60*24））；
小时=数学楼层（差值/（1000*60*60））；
分钟=数学楼层（差值/（1000*60））；
秒=数学楼层（差异/1000）；
d=天；
h=小时-天*24；
m=分钟-小时*60；
s=秒-分钟*60；
让timers=document.querySelectorAll（'.timer'）
timers.forEach（（e）=>{//计时器数组
e、 innerHTML=
''+d+'天'+
''+h+'小时'+
''+m+'分钟'+
''+s+'秒'；
})
}
setInterval（'updateTimer（）'，1000）
正文{
文本对齐：居中；
填充：70px 50px；
背景#0D1A29；
字体系列：“Helvetica Neue”、“Open Sans”、Helvetica、arial、Sans serif；
}
.计时器{
字号：3em；
字号：100；
颜色：白色；
文本阴影：0 0 20px#48C8FF；
div{
显示：内联块；
最小宽度：90px；
跨度{
颜色：#B1CDF1；
显示：块；
字体大小：.35em；
字体大小：400；
}
}
}
您可以从div中获取值

此代码允许在页面上使用不同的计时器

在所有div上放置相同的时间以获得相同的计时器


函数更新程序（）{
[…document.querySelectorAll（“.timer”）].forEach（timer=>{
const future=Date.parse（timer.getAttribute（“数据未来”）；
const now=新日期（）；
const diff=未来-现在；
施工天数=数学楼层（差值/（1000*60*60*24））；
常数小时=数学楼层（差值/（1000*60*60））；
常数分钟=数学楼层（差值/（1000*60））；
常数秒=数学层（差值/1000）；
h=小时-天*24；
m=分钟-小时*60；
s=秒-分钟*60；
timer.innerHTML=`${days}day${days===1？”：“s”}
${h}小时${h==1？”：“s”}
${m}分钟${m==1？”：“s”}
${s}秒${s==1？”：“s”}`；
})
}
setInterval（'updateTimer（）'，1000）
正文{
文本对齐：居中；
填充：70px 50px；
背景#0D1A29；
字体系列：“Helvetica Neue”、“Open Sans”、Helvetica、arial、Sans serif；
}
.计时器{
字号：3em；
字号：100；
颜色：白色；
文本阴影：0 0 20px#48C8FF；
div{
显示：内联块；
最小宽度：90px；
跨度{
颜色：#B1CDF1；
显示：块；
字体大小：.35em；
字体大小：400；
}
}
}


您不能仅仅从
getElementById
切换到
getElementsbyClassName
，然后期望一切正常。第一个返回一个元素，第二个返回一个HTMLCollection–您必须循环该集合中的元素，然后分别处理它们。（如果您不希望所有这些元素具有相同的计数器值，那么您必须进一步