第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在循環(huán)中多次執(zhí)行JavaScript倒數(shù)腳本

在循環(huán)中多次執(zhí)行JavaScript倒數(shù)腳本

PHP
慕無忌1623718 2021-05-10 12:30:12
我使用的是Symfony,目前正在嘗試從數(shù)據(jù)庫中顯示這些元素,但是這里有一個變化,因為這些元素中的每個元素都有持續(xù)時間,因此我必須顯示該持續(xù)時間的倒數(shù)。我已經(jīng)實現(xiàn)了倒計時腳本(盡管它仍然有一些問題),但是它僅以第一個值執(zhí)行,而其他行中的字段保持空白。現(xiàn)在,我將解釋代碼:我有很多停車場,每個停車場都有很多汽車(票數(shù)):我的頁面顯示了停車場,與之相關(guān)的汽車,以及每輛汽車的數(shù)量和允許的停車時間(時間記錄在數(shù)據(jù)庫的一列中)。我還在腳本中使用cookie來節(jié)省分鐘和幾秒鐘,所以我不知道如何對多個值執(zhí)行此操作。這是我所做的照片:這是我的代碼(對不起,它很亂):{% 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();}
查看完整描述

2 回答

?
皈依舞

TA貢獻1851條經(jīng)驗 獲得超3個贊

您有一些嵌套問題(腳本標記需要退出for循環(huán)),重復(fù)的id和不正確的計時系統(tǒng)。如果您需要將事情更新為實時,請使用時間戳記和系統(tǒng)時鐘來確定實際剩余時間。


首先,向您的實體添加方法以獲取到期時間戳(以秒為單位)


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并更新文本以反映該時間點的剩余天數(shù),小時數(shù),分鐘數(shù)和秒數(shù)。在這里,我通過使用setTimeout()函數(shù)內(nèi)部每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添加更多計時器(在頁面加載后),則應(yīng)放置以下行:


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


在功能塊內(nèi)部,可以在每次調(diào)用時搜索新的計時器。


查看完整回答
反對 回復(fù) 2021-05-28
?
素胚勾勒不出你

TA貢獻1827條經(jīng)驗 獲得超9個贊

有重復(fù)的ID(“ test”,“ demo”),每個文件一個。

來自MDN doc

id全局屬性定義一個唯一標識符(ID),該標識符在整個文檔中必須是唯一的。其目的是在鏈接(使用片段標識符),腳本或樣式(使用CSS)時標識元素。

document.getElementById("demo")將返回一個結(jié)果,可能是DOM中的第一個結(jié)果。(我懷疑這也是對的,var test = $('#test').data("isTest");但我不太熟練使用jQuery)。

也許您可以通過“名稱”屬性進行選擇,然后將代碼更改為具有一個<script>可迭代所需節(jié)點的元素。


查看完整回答
反對 回復(fù) 2021-05-28
  • 2 回答
  • 0 關(guān)注
  • 210 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號