时间戳

首页 > 解决方案 > javascript 遍历集合并填充一组值

javascript - javascript 遍历集合并填充一组值

问题描述

在此处输入图像描述我有一个日期集合（包括时间），我需要遍历集合并根据用户输入的日期插入正确的日期和时间。在 html 文档的末尾，显然我有 javascript；js 将遍历表格并插入正确的日期

因此，如果某个日期恰好在今天之前，则日期计数器将显示为负数（我稍后会处理将其归零）但如果日期在未来，则计时器应显示正确的时间..

我在使用此应用程序时面临的问题是日期集合显示的日期相同。所以不管我的收藏中有 100 个日期还是 1 个日期，计时器都会在计时器上显示相同的日期。

我没有以正确的方式执行每个集合。我也没有正确地获取类名。我想这就是为什么计时器中的日期显示相同的原因。所以它抓住了 js 可以抓取的第一个日期并填充所有具有相同日期的计时器

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="Author" content="" />

</head>

<body>
    <section>
        <table>
            <tr>
                <td class="for-sale-heading">
                    <h4>End Date:&nbsp;</h4>
                    <h5 class="time">04-30-22 15:00:00</h5>
                </td>
                <td class="for-sale-heading">
                    <div class="clock">
                        <div>
                            <span class="day"></span>
                            <div class="local-date">Days</div>
                        </div>
                        <div>
                            <span class="hour"></span>
                            <div class="local-date">Hours</div>
                        </div>
                        <div>
                            <span class="minute"></span>
                            <div class="local-date">Minutes</div>
                        </div>
                        <div>
                            <span class="second"></span>
                            <div class="local-date">Seconds</div>
                        </div>
                    </div>
                    <p class="closed"></p>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td class="for-sale-heading">
                    <h4>End Date:&nbsp;</h4>
                    <h5 class="time">04-30-20 15:00:00</h5>
                </td>
                <td class="for-sale-heading">
                    <div class="clock">
                        <div>
                            <span class="day"></span>
                            <div class="local-date">Days</div>
                        </div>
                        <div>
                            <span class="hour"></span>
                            <div class="local-date">Hours</div>
                        </div>
                        <div>
                            <span class="minute"></span>
                            <div class="local-date">Minutes</div>
                        </div>
                        <div>
                            <span class="second"></span>
                            <div class="local-date">Seconds</div>
                        </div>
                    </div>
                    <p class="closed"></p>
                </td>
            </tr>
        </table>
    </section>
    <script type="application/javascript">
        $(document).ready(function() {
            const timeClasses = document.getElementsByClassName("time");
            Array.prototype.forEach.call(timeClasses, function(timeClass) {
                const x = setInterval(function() {
                    // const innerHtml1 = $('.time').html();
                    const innerHtml = timeClass.innerHTML;

                    const deadline = new Date(innerHtml.toString()).getTime();
                    const now = new Date().getTime();
                    const t = deadline - now;
                    const days = Math.floor(t / (1000 * 60 * 60 * 24));
                    const hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    const minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
                    const seconds = Math.floor((t % (1000 * 60)) / 1000);
                    const spanElements = document.getElementsByTagName("span");
                    Array.prototype.forEach.call(spanElements, function(spanElement) {
                        // console.log(el.className);
                        // console.log(el.getElementsByClassName);
                        switch (spanElement.className) {
                            case "day":
                                //                            console.log("day");
                                $('.day').html(days); // or use el.innerHTML = days;
                                break;
                            case "hour":
                                //                            console.log("hour");
                                $('.hour').html(hours); // or use el.innerHTML = hours;
                                break;
                            case "minute":
                                //                            console.log("minute");
                                $('.minute').html(minutes); // or use el.innerHTML = minutes;
                                break;
                            case "second":
                                //                            console.log("second");
                                $('.second').html(seconds); // or use el.innerHTML = seconds;
                                break;
                        }
                    });

                }, 1000);
            });
        });
    </script>
</body></html>

标签： javascript

解决方案

数字闪烁

您正在使用延迟为零毫秒的 setInterval 方法，它会尝试尽可能快地刷新数字（为什么数字似乎在闪烁）。

const x = setInterval(function() {
    // code here,
    0 // <-- delay
});

如果将延迟设置为更大的数字（例如 1000 毫秒），数字将停止闪烁

const x = setInterval(function() {
    // code here,
    1000 // <-- delay
});

数字相同

您正在引用类名来设置 html 中的数字

$('.day').html(days);

这不起作用，因为每个日期的元素具有相同的类名，您需要使用 ID 来引用正确的元素。

有关示例，请参见此 JSFiddle：https ://jsfiddle.net/2qf30v9m/

推荐阅读