Question

我有一些显示倒数计时器的JS，但这只显示页面上的一个项目，我需要在我的PHP foreach循环中使用它。下面的代码在foreach循环中。

                 <div class="countdown-timer">
                    <strong>Time Left - </strong> <span id="countdown"></span>
                </div>

                <script type="text/javascript" charset="utf-8">

                    // set the date we're counting down to
                    var target_date = new Date("<?php echo $listing->ends; ?>").getTime(); // echo would return 2014-07-15

                    // variables for time units
                    var days, hours, minutes, seconds;

                    // get tag element
                    var countdown = document.getElementById("countdown");

                    // update the tag with id "countdown" every 1 second
                    setInterval(function () {

                        // find the amount of "seconds" between now and target
                        var current_date = new Date().getTime();
                        var seconds_left = (target_date - current_date) / 1000;

                        // do some time calculations
                        days = parseInt(seconds_left / 86400);
                        seconds_left = seconds_left % 86400;

                        hours = parseInt(seconds_left / 3600);
                        seconds_left = seconds_left % 3600;

                        minutes = parseInt(seconds_left / 60);
                        seconds = parseInt(seconds_left % 60);

                        // format countdown string + set tag value
                        countdown.innerHTML = days + " days " + hours + " hrs "
                        + minutes + " min " + seconds + " secs ";

                    }, 1000);

                </script>

Answer 1

您需要为每个元素创建一个唯一的ID，这样您就可以单独引用每个元素。

此外，你最好将javascript块从php foreach循环中删除。相反，创建每个元素ID的数组，然后通过javascript将该数组用于setInterval每个项目。这样，你就不会重复一堆JS代码了。

粗略的例子：

<!-- php code here to loop and create these html elements -->
<div class="countdown-timer">
        <strong> Time Left - </strong> <span id="countdown-INSERT_ID_FROM_PHP_HERE"></span>
</div>
<!--end php code to create html -->

<script type="text/javascript">
    var createCountdown = function(id, date) {
        var target_date = new Date(date).getTime();
        var days, hours, minutes, seconds;
        var countdown = document.getElementById(id);

        setInterval(function() {
            var current_date = new Date().getTIme();
            var seconds_left = (target_date - current_date) / 1000;

            days = parseInt(seconds_left / 86400);
            seconds_left = seconds_left % 86400;

            hours = parseInt(seconds_left / 3600);
            seconds_left = seconds_left % 3600;

            minutes = parseInt(seconds_left / 60);
            seconds = parseInt(seconds_left % 60);

            // format countdown string + set tag value
            countdown.innerHTML = days + " days " + hours + " hrs "
        + minutes + " min " + seconds + " secs ";
        }, 1000);
    };

    // USE PHP TO MAKE THIS ARRAY
    // POPULATE IT WITH OBJECTS THAT LOOK LIKE THIS
    // { id: "countdown-6", date: "2014-07-01" }
    var allCounters = [
        { id: "countdown-6", date: "2014-07-01" }
    ];

    allCounters.forEach(function(counter) {
        createCountdown(counter.id, counter.date);
    });
</script>

循环foreach，从db中获取数据并插入JS

1 个答案: