使用PHP＆JS爲單獨列顯示多個計時器！但顯示「EXPIRED EVERYTIME」

我正在檢索從PHP MySQL DB以YYYY:MM:DD HH:MM:SS格式保存的時間戳。使用PHP＆JS爲單獨列顯示多個計時器！但顯示「EXPIRED EVERYTIME」

然後我希望這段時間從當前時間戳中減去並顯示在表格中以顯示飛行在xyz秒內起飛。那就是計時器的用途。

表有多個rows.I看到這回答我的問題，各種各樣的問題，但沒有：

<?php 
    if (mysqli_num_rows($result)>0) 
    { 
     while($row=mysqli_fetch_array($result)) { 
      ?> 
     <tr> 
     <td><?php echo $row['flightno']; ?></td> 
     <td><?php echo $row['flightdatetime']; ?></td> 
     <td><?php echo $row['flightfuel']; ?></td> 
     <script>var totaltime= <?php echo json_encode($row['flightdatetime']); ?>; </script> 
     <td ><span id="demo"> </span> </td> 
     <script> 
     for(i=0;i<19;i++) 
     {var ttime=totaltime[i];}

//問題是這裏的某個地方，我不知道如何使用JSON //上述交易。將php數組轉換爲json以使用javascript的定時器。

var countDownDate = new Date(ttime).getTime(); 
    var x = setInterval(function() { 
     var now = new Date().getTime(); 

    // Find the distance between now an the count down date 

     var distance = countDownDate - now; 

    // Time calculations for days, hours, minutes and seconds 
    var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
    var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
    var seconds = Math.floor((distance % (1000 * 60))/1000); 

    document.getElementById("demo").innerHTML = days + "d " + hours + "h " 
    + minutes + "m " + seconds + "s " ; 

    // If the count down is over 
    if (distance < 0) { 
     clearInterval(x); 
     document.getElementById("demo").innerHTML = "EXPIRED"; 
    } 
}, 1000); </script> 

     </tr> 

     <?php 
    } 
    }  
    ?> 
    </tbody> 
    </table> 
    </div> 
</div> 

</body> 
</html>

來源

2017-01-26 Razor

您需要縮小比這更多的範圍。我們不需要你所有的代碼，你需要在你發佈之前做一些調試。您只應發佈[**最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve）。 –

是的，我一直在調試過去3-4個小時.i've縮短了代碼。以上所有內容都是正確的和不相關的。¶php nd js代碼包含在編輯中 – Razor

任何事情？我可以解決這個問題 – Razor

看來你正在使用json_encode（）來轉義你的數據庫時間戳字符串。你的數據庫價值不值得信賴嗎？好吧，你只是安全。然後你用一個for循環重構一個字符。這不可能是確保合法性的最重要的方式，對嗎？

無論如何，它看起來像你的totaltime和ttime正在你的mysql結果循環中聲明。它也似乎是你正在關閉你的表之前運行你的countDown進程。

那麼這個countDown過程只需要調用一次或每次聲明後totaltimettime？如果重複countDown多次，那麼你不使用非常D.R.Y.處理。如果您只是在桌子末尾調用倒數一次，那麼您將只能倒數一次，並且將在最後一次ttime的聲明上。

我的臨時解決方案是簡單地將您的$row['flightdatetime']回顯到您的dom中。（這是在這裏可以/應當調整的變量存儲到一個更有利的生產就緒技術，但確保您唯一地識別每個時間標記，使得倒計時過程被施加到所有的時間標記的部分。

echo "<td><span class="demo" data-val="{$row['flightdatetime']}"></span></td>";

然後問的JavaScript的功能，適用於所有.demo元素

同樣，我也不會親自把這個片斷生產準備，但這會告訴你一個辦法讓事情滴答：上（簡單草案jsfiddle和產品準備jsfiddle隱藏ini小時值）。

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".demo").each(function(index){ 
     var obj=$(this); 
     var countDownDate=new Date(obj.data('val')).getTime(); 
     var x=setInterval(function(obj,countDownDate){ 
      var now=new Date().getTime(); 
      var distance=countDownDate-now; 
      // If the count down is over 
      if (distance<0){ 
       clearInterval(x); 
       obj.text("EXPIRED"); 
      }else{ 
       // Time calculations for days, hours, minutes and seconds 
       var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
       var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
       var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
       var seconds = Math.floor((distance % (1000 * 60))/1000); 
       obj.text(days+"d "+hours+"h "+minutes+"m "+seconds+"s "); 
      } 
     }, 1000,obj,countDownDate); 
    }); 
}); 
</script> 
</head> 
<body> 
<span class="demo">2017-03-25 02:03:04</span><br> 
<span class="demo">2017-03-15 10:57:13</span>

來源

2017-03-15 01:13:05 mickmackusa

@Razor沒關係，我沒有爲我的第一份草稿贏得綠色標記（我假設，因爲我在顯示countDown之前顯示了php的初始時間戳值）。我已經更新了我的答案，使用'data-val'來不可見地保存這些值並添加更新的jsfiddle。這應該賺取綠色的勾號，如果不是請解釋什麼是不正確的。 – mickmackusa

使用PHP＆JS爲單獨列顯示多個計時器！但顯示「EXPIRED EVERYTIME」

回答

相關問題