php循环ierations上迭代的Javascript基javascript循环nr

Question

考虑下面的代码，它从数据库中花费时间，javascript获取选择框值并执行倒计时计算。

var seconds = document.getElementById("countTime").textContent;
var seconds = seconds*3600;
function timer() {
 //somecode
}

echo'<td id="countTime" style="">';
                    echo    $days_remaining.$hours_remaining;
                        echo'</td>';

这就像一种魅力，我得到了这个输出

​

​

但我的问题是：

• 我正在echo'<td id="countdown"中创建无效的html ..。好的，我可以很容易地通过声明一个数组并将它附加到id (如：<td id="countdown'.$nr." //assume $nr = 1 ++)来修复这个问题。 但
• 我的大问题在于我的jscript代码，上面的javascript只适用于第一个td元素，<td>元素在一个循环中，<td>元素的nr是基于循环迭代次数的。

和

1. 如何修改上面的jscript以返回每个<td>元素内的倒计时时间？我能做这个var seconds = document.getElementById( var seconds = document.getElementById("countTime".nr++).value;).innerText;吗？
2. 很明显，我需要使用一个循环，但是如何获得javascript循环应该根据php循环迭代的次数？我想我可以用$var++在元素中显示它的php循环迭代次数并得到它的.innerText值，但是这看起来效率很低。

也许我想得太多了，但我被困住了.

Answer 1

就像注释中提到的那样，在<td>上使用一个公共类。

var elements = document.querySelectorAll('.countTime');
var seconds, i;

// elements now contains an object, that contains all elements
// that have the class 'countTime'

for (i = 0; i < elements.length; i++) {
    seconds = elements[i].textContent * 3600;
    // etc...
}

Answer 2

在您的项目中尝试操作下面的代码，希望它能工作。

function countDown() {
            let expireDate = document.querySelectorAll('.expire_date');

            let x = [];

            for (let i = 0; i < expireDate.length; i++) {
                x.push(expireDate[i].innerHTML);
            }

            console.log(x)

            for (let i = 0; i < x.length; i++) {
                const m = i;
                let interval = setInterval(function () {
                    if (!isNaN(Date.parse(x[i]))) {
                        let prevDate = new Date(x[i]).getTime();
                        let now = new Date().getTime();

                        let diff = prevDate - now;
                        console.log(diff)

                        let days = Math.floor(diff / (1000 * 86400)) //60 * 60 * 24
                        let hours = Math.floor(diff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)) //60 * 60 * 24
                        let min = Math.floor(diff % (1000 * 60 * 60) / (1000 * 60))
                        let secs = Math.floor(diff % (1000 * 60) / 1000)

                        console.log(`${days}d ${hours}hrs ${min}mins ${secs}s`);

                        let displayText = document.querySelectorAll('.countdown');
                        for (let index = 0; index < displayText.length; index++) {
                            const e = index;

                            if (e == i) {
                                displayText[index].innerHTML = `${days}d ${hours}hrs ${min}mins ${secs}s`;
                            }
                        }

                        if (diff < 0) {
                            clearInterval(interval);
                            displayText[index].innerHTML = 'expired'
                        }
                    }
                }, 1000)

            }

        }

        countDown();