同一WordPress页面多次使用倒计时计时器失败，求解决方法

你遇到的问题主要有两个关键点：方法名拼写错误，以及没有处理getElementsByClassName返回的元素集合。我来一步步帮你修正：

首先，分析问题根源 #

1. 方法名拼写错误：你写的getElementsbyClassName是错误的，正确的方法名是getElementsByClassName（注意Elements是大写E，by是小写，这是DOM API的标准写法，拼写错误会导致获取不到任何元素）。
2. 元素集合需要遍历：getElementsByClassName返回的是一个HTMLCollection（类数组对象），包含所有匹配class的元素，而不是单个元素。原代码直接用.innerHTML是针对单个元素的操作，现在需要遍历每个元素来更新内容。

修正后的完整代码 #

HTML部分（多个倒计时器）

<div class="timer"></div>
<div class="timer"></div>
<!-- 可以添加更多的.timer元素 -->

CSS部分（修改选择器为类选择器）

body {
 text-align: center;
 padding: 70px 50px;
 background: #0D1A29;
 font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}
.timer {
 font-size: 3em;
 font-weight: 100;
 color: white;
 text-shadow: 0 0 20px #48C8FF;
 div {
 display: inline-block;
 min-width: 90px;
 span {
 color: #B1CDF1;
 display: block;
 font-size: .35em;
 font-weight: 400;
 }
 }
}

JavaScript部分（遍历更新所有倒计时器）

function updateTimer() {
 // 目标时间（如果需要每个倒计时器不同，可以看后面的扩展方案）
 const future = Date.parse("June 11, 2021 11:30:00");
 const now = new Date();
 const diff = future - now;

 // 计算天、时、分、秒
 const days = Math.floor(diff / (1000 * 60 * 60 * 24));
 const hours = Math.floor(diff / (1000 * 60 * 60));
 const mins = Math.floor(diff / (1000 * 60));
 const secs = Math.floor(diff / 1000);

 const d = days;
 const h = hours - days * 24;
 const m = mins - hours * 60;
 const s = secs - mins * 60;

 // 获取所有class为timer的元素
 const timers = document.getElementsByClassName("timer");
 // 遍历每个元素，更新倒计时内容
 for (let i = 0; i < timers.length; i++) {
 timers[i].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>';
 }
}
// 用函数引用作为回调，比字符串形式更安全规范
setInterval(updateTimer, 1000);

扩展：让每个倒计时器有独立的目标时间 #

如果需要页面上的每个倒计时器对应不同的截止时间，可以给每个.timer元素添加data-target属性来存储目标时间，然后在JS中读取：

修改后的HTML

<div class="timer" data-target="June 11, 2021 11:30:00"></div>
<div class="timer" data-target="July 1, 2021 00:00:00"></div>

修改后的JavaScript

function updateTimer() {
 const now = new Date();
 const timers = document.getElementsByClassName("timer");

 for (let i = 0; i < timers.length; i++) {
 const timerEl = timers[i];
 // 读取当前元素的目标时间
 const future = Date.parse(timerEl.dataset.target);
 // 跳过无效的日期格式
 if (isNaN(future)) continue;

 const diff = future - now;
 const days = Math.floor(diff / (1000 * 60 * 60 * 24));
 const hours = Math.floor(diff / (1000 * 60 * 60));
 const mins = Math.floor(diff / (1000 * 60));
 const secs = Math.floor(diff / 1000);

 const d = days;
 const h = hours - days * 24;
 const m = mins - hours * 60;
 const s = secs - mins * 60;

 timerEl.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>';
 }
}
setInterval(updateTimer, 1000);

这样每个倒计时器就可以独立运行，显示不同的倒计时啦！

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