循环foreach，从db中抓取数据并插入到JS中 - Looping foreach, grabbing data from db and insert into JS

Looping foreach, grabbing data from db and insert into JS

我有一些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>

您需要为每个元素创建一个唯一的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>