使代码在每个元素上工作，并根据自己的日期

Question

我想让倒计时使用javascript和一个表html元素。代码工作得很好，但问题是我有两个表，每个表都有自己的"时间"元素和自己的日期在我的代码中，我想根据他自己的元素值做一个倒计时，这是代码:

<article>
<div class="d-flex align-items-center">
<div class="post-meta">
<p class="post-date">
<time class="countdown" datetime="2024-11-30 08:50:00">January 21 at 01:00</time>
</p>
</div>
</div>
<div class="mt-4">
<table style="width:100%; text-align: left;">
<tr>
<td class="days"></td>
<td class="hours"></td>
<td class="minutes"></td>
<td class="seconds"></td>
</tr>
<tr>
<th>DAYS</th>
<th>HOURS</th>
<th>MINS</th>
<th>SECS</th>
</tr>
</table>
</div>
</article>
</div><!-- End post list item -->
<div class="col-xl-4 col-md-6">
<article>
<div class="d-flex align-items-center">
<div class="post-meta">
<p class="post-date">
<time datetime="2025-11-30 08:50:00">January 21 at 01:00</time>
</p>
</div>

</div>
<div class="mt-4">
<table style="width:100%; text-align: left;">
<tr>
<td class="days"></td>
<td class="hours"></td>
<td class="minutes"></td>
<td class="seconds"></td>
</tr>
<tr>
<th>DAYS</th>
<th>HOURS</th>
<th>MINS</th>
<th>SECS</th>
</tr>
</table>
</div>
</article>
</div><!-- End post list item -->

这是我的javascript代码，使倒数:

<script>
/* Countdown for 'Upcoming Events'*/
// Set the date we're counting down to
var enddateTime = document.getElementsByTagName('time')[0].getAttribute('datetime');

var countDownDate = new Date(enddateTime).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display the result in the element with id="demo"
CountdownDays(days);
CountdownHours(hours);
CountdownMinutes(minutes);
CountdownSeconds(seconds);

// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementsByClassName("countdown").innerHTML = "EXPIRED";
}
}, 1000);
function CountdownDays(value)
{
var countDownDays = document.getElementsByClassName("days");
for(let i=0;i<countDownDays.length;i++){
countDownDays[i].innerHTML = value;
}
}
function CountdownHours(value) {
var countDownHours = document.getElementsByClassName("hours");
for(let i=0;i<countDownHours.length;i++){
countDownHours[i].innerHTML = value;
}
}
function CountdownMinutes(value) {
var countDownMinutes = document.getElementsByClassName("minutes");
for(let i=0;i<countDownMinutes.length;i++){
countDownMinutes[i].innerHTML = value;
}
}
function CountdownSeconds(value) {
var countDownSeconds = document.getElementsByClassName("seconds");
for(let i=0;i<countDownSeconds.length;i++){
countDownSeconds[i].innerHTML = value;
}
}
</script>```

So is it possible to get a countdown for each 'datetime' according to each own class date without repeating the function two times?

Answer 1

我已经按照你的要求编辑了我的答案…请编辑测试日期

const countdowns = document.querySelectorAll('.countdown');
countdowns.forEach(countdown => {
const sibling = countdown.parentNode.parentNode.parentNode.nextElementSibling
const endDate = new Date(countdown.getAttribute('datetime'));
const daysElement = sibling.querySelector('.days');
const hoursElement = sibling.querySelector('.hours');
const minutesElement = sibling.querySelector('.minutes');
const secondsElement = sibling.querySelector('.seconds');


setInterval(() => {
const currentDate = new Date();
const timeLeft = endDate - currentDate;
if (timeLeft <= 0) {
countdown.innerHTML = "EXPIRED";
clearInterval();
} else {
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

daysElement.innerHTML = days;
hoursElement.innerHTML = hours;
minutesElement.innerHTML = minutes;
secondsElement.innerHTML = seconds;
}
}, 1000);
})

<article>
<div class="d-flex align-items-center">
<div class="post-meta">
<p class="post-date">
<time class="countdown" datetime="2023-01-16 12:38:00">January 21 at 01:00</time>
</p>
</div>
</div>
<div class="mt-4">
<table style="width:100%; text-align: left;">
<tr>
<td class="days"></td>
<td class="hours"></td>
<td class="minutes"></td>
<td class="seconds"></td>
</tr>
<tr>
<th>DAYS</th>
<th>HOURS</th>
<th>MINS</th>
<th>SECS</th>
</tr>
</table>
</div>
</article>
<!-- End post list item -->
<div class="col-xl-4 col-md-6">
<article>
<div class="d-flex align-items-center">
<div class="post-meta">
<p class="post-date">
<time class="countdown" datetime="2025-11-30 08:50:00">January 21 at 01:00</time>
</p>
</div>

</div>
<div class="mt-4">
<table style="width:100%; text-align: left;">
<tr>
<td class="days"></td>
<td class="hours"></td>
<td class="minutes"></td>
<td class="seconds"></td>
</tr>
<tr>
<th>DAYS</th>
<th>HOURS</th>
<th>MINS</th>
<th>SECS</th>
</tr>
</table>
</div>
</article>
</div>