Question

考虑以下代码，它从数据库中获取时间，javascript获取selectbox值并执行倒计时计算。

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>';

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

enter image description here

但这是我的问题：

我在echo'<td id="countdown"中创建了无效的html ...好吧我可以通过声明一个数组并将其附加到ID来轻松解决这个问题：<td id="countdown'.$nr." //assume $nr = 1 ++

BUT
我的大问题在于我的jscript代码，上面的javascript仅适用于<td>元素在循环中的第一个td元素，而<td>元素的nr基于该数字循环迭代

THUS

如何修改上面的jscript以在每个<td>元素内返回倒计时时间？我可以这样做var seconds = document.getElementById( var seconds = document.getElementById("countTime".nr++).value;).innerText; ??
很明显我必须使用一个循环，但是如何根据php循环迭代次数来获取javascript循环迭代的次数？ 我想我可以计算php循环迭代次数，$var++在元素中显示它并获取.innerText值，但这看起来非常低效

也许我在思考这个问题，但我被困住了......

Answer 1

就像评论中提到的那样，在<td>上使用一个公共类。然后更改您的Javascript以使用querySelectorAll：

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();

Javascript基础javascript循环nr迭代PHP循环ierations

2 个答案: