在循环中多次执行JavaScript倒数脚本

Question

我使用的是Symfony，目前正在尝试从数据库中显示这些元素，但是这里有一个变化，因为这些元素中的每个元素都有持续时间，因此我必须显示该持续时间的倒数。

我已经实现了倒计时脚本（尽管它仍然有一些问题），但是它仅以第一个值执行，而其他行中的字段保持空白。

现在，我将解释代码：我有很多停车场，每个停车场都有很多汽车（票数）：我的页面显示了停车场，与之相关的汽车，以及每辆汽车的数量和允许的停车时间（时间记录在数据库的一列中）。

我还在脚本中使用cookie来节省分钟和几秒钟，所以我不知道如何对多个值执行此操作。这是我所做的照片：

这是我的代码（对不起，它很乱）：

{% extends 'Agent/Baseagent.html.twig' %}

{% block title %}Parking index{% endblock %}

{% block body %}

    {% for parking in user.parkings %}

         <h2>Parking</h2>

             {{ parking.libelle }}

              <h2>voitures</h2>

<table id="file_export" class="table table-striped table-bordered">

                <thead>

                <tbody>

            {% for voitures in parking.voitures %}

                <tr>

                <td>

               {{ voitures.matricule }}

                </td>

                <td>

                <div id="timer" class="js-user-rating" data-is-test="{{ voitures.time}}"></div>

                <td class="center"><span id="demo"></span></td>

                 <script>

 var firstTime = true;

function countdown(minutes) {

    var seconds = 60;

    var mins = minutes;

    if(firstTime && getCookie("minutes")&&getCookie("seconds"))

    {

            firstTime = false;

         var seconds = getCookie("seconds");

         var mins = getCookie("minutes");

    }

    function tick() {

        var counter = document.getElementById("timer");

        setCookie("minutes",mins,10)

        setCookie("seconds",seconds,10)

        var current_minutes = mins-1

        seconds--;

        counter.innerHTML = 

        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);

        //save the time in cookie

        if( seconds > 0 ) {

            setTimeout(tick, 1000);

        } else {

            if(mins > 1){

               // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst    

               setTimeout(function () { countdown(mins - 1); }, 1000);

            }

        }

    }

    tick();

}

Answer 1

您有一些嵌套问题（脚本标记需要退出for循环），重复的id和不正确的计时系统。如果您需要将事情更新为实时，请使用时间戳记和系统时钟来确定实际剩余时间。首先，向您的实体添加方法以获取到期时间戳（以秒为单位）class Voiture{&nbsp; ...&nbsp; public function getExpiresAt()&nbsp; {&nbsp; &nbsp; $gareele = $this->getGareele();&nbsp; &nbsp; $expires = clone $gareele;&nbsp; &nbsp; $expires->modify('+' . $this->getTime() . ' min');&nbsp; &nbsp; return $expires->format('U');&nbsp; }}然后在模板中，将计时器范围更改为具有class="timer"（不需要id），并添加带有过期时间戳记的data属性。该脚本将遍历所有.timers并更新文本以反映该时间点的剩余天数，小时数，分钟数和秒数。在这里，我通过使用setTimeout()函数内部每100毫秒更新一次文本。{% extends 'Agent/Baseagent.html.twig' %}{% block title %}Parking index{% endblock %}{% block body %}&nbsp; {% for parking in user.parkings %}&nbsp; &nbsp; <h2>Parking</h2>&nbsp; &nbsp; {{ parking.libelle }}&nbsp; &nbsp; <h2>voitures</h2>&nbsp; &nbsp; <table id="file_export" class="table table-striped table-bordered">&nbsp; &nbsp; &nbsp; <thead></thead>&nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; {% if parking.voitures|length > 0 %}&nbsp; &nbsp; &nbsp; &nbsp; {% for voitures in parking.voitures %}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ voitures.matricule }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="timer" data-expires="{{ voitures.getExpiresAt() }}"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; {% endfor %}&nbsp; &nbsp; &nbsp; {% else %}&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td colspan="6">no records found</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; {% endif %}&nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; </table>&nbsp; {% endfor %}&nbsp; <script>&nbsp; &nbsp; var timers = document.querySelectorAll('.timer')&nbsp; &nbsp; function updateTimers () {&nbsp; &nbsp; &nbsp; var rightNow = Math.floor(Date.now()/1000) // in seconds&nbsp; &nbsp; &nbsp; timers.forEach(function (timer) {&nbsp; &nbsp; &nbsp; &nbsp; var expires = parseInt(timer.dataset.expires) // in seconds&nbsp; &nbsp; &nbsp; &nbsp; if (rightNow > expires) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Time expired&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timer.innerText = 'Expired'&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var seconds = expires - rightNow&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var minutes = Math.floor(seconds/60)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var hours = Math.floor(minutes/60)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var days = Math.floor(hours/24)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; seconds = ('0' + String(seconds%60)).slice(-2)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minutes = ('0' + String(minutes%60)).slice(-2)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hours = ('0' + String(hours%24)).slice(-2)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timer.innerText = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; updateTimers()&nbsp; &nbsp; &nbsp; }, 100)&nbsp; &nbsp; }&nbsp; &nbsp; updateTimers()&nbsp; </script>{% endblock %}笔记如果要通过ajax添加更多计时器（在页面加载后），则应放置以下行：var timers = document.querySelectorAll('.timer')在功能块内部，可以在每次调用时搜索新的计时器。

Answer 2

有重复的ID（“ test”，“ demo”），每个文件一个。来自MDN doc：id全局属性定义一个唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。这document.getElementById("demo")将返回一个结果，可能是DOM中的第一个结果。（我怀疑这也是对的，var test = $('#test').data("isTest");但我不太熟练使用jQuery）。也许您可以通过“名称”属性进行选择，然后将代码更改为具有一个<script>可迭代所需节点的元素。