在循环中多次执行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

{

  ...

  public function getExpiresAt()

  {

    $gareele = $this->getGareele();

    $expires = clone $gareele;

    $expires->modify('+' . $this->getTime() . ' min');

    return $expires->format('U');

  }

}

然后在模板中，将计时器范围更改为具有class="timer"（不需要id），并添加带有过期时间戳记的data属性。该脚本将遍历所有.timers并更新文本以反映该时间点的剩余天数，小时数，分钟数和秒数。在这里，我通过使用setTimeout()函数内部每100毫秒更新一次文本。

{% 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></thead>

      <tbody>

      {% if parking.voitures|length > 0 %}

        {% for voitures in parking.voitures %}

          <tr>

            <td>

              {{ voitures.matricule }}

            </td>

            <td class="center">

              <span class="timer" data-expires="{{ voitures.getExpiresAt() }}"></span>

            </td>

          </tr>

        {% endfor %}

      {% else %}

        <tr>

          <td colspan="6">no records found</td>

        </tr>

      {% endif %}

      </tbody>

    </table>

  {% endfor %}

  <script>

    var timers = document.querySelectorAll('.timer')

    function updateTimers () {

      var rightNow = Math.floor(Date.now()/1000) // in seconds

      timers.forEach(function (timer) {

        var expires = parseInt(timer.dataset.expires) // in seconds

        if (rightNow > expires) {

          // Time expired

          timer.innerText = 'Expired'

        } else {

          var seconds = expires - rightNow

          var minutes = Math.floor(seconds/60)

          var hours = Math.floor(minutes/60)

          var days = Math.floor(hours/24)

          seconds = ('0' + String(seconds%60)).slice(-2)

          minutes = ('0' + String(minutes%60)).slice(-2)

          hours = ('0' + String(hours%24)).slice(-2)

          timer.innerText = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's'

        }

      })

      setTimeout(function () {

        updateTimers()

      }, 100)

    }

    updateTimers()

  </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>可迭代所需节点的元素。