2017-01-26 16 views
0

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];} 

//問題がSOMEWHEREここにあり、私はJSON // ABOVEに対処する方法を知りません。タイマーのJavaScriptで動作するようにjsonにphp配列を変換しました。

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> 
+1

これ以上絞り込む必要があります。私たちはあなたのコードの全てを必要とせず、あなたがここに投稿する前にいくつかのデバッグを行うことが期待されます。 [**最小、完全、および確認可能な例**](http://stackoverflow.com/help/mcve)のみ投稿してください。 –

+0

はい私は過去3〜4時間デバッグしています。コードを短くしました。上記の内容はすべて正確で無関係です.PHDのjsコードが編集に含まれています – Razor

+0

何か? – Razor

答えて

1

あなたのデータベースのタイムスタンプ文字列をエスケープするjson_encode()を使用しています表示されます。あなたのデータベースの価値は信頼できないのですか?さて、あなたはただの安全です。次に、forループを使って一度に1文字ずつ再構成します。これは妥当性を保証するための最善の方法ではありません。

とにかく、あなたのtotaltimettimeがmysqlの結果ループで宣言されているようです。また、テーブルを閉じる直前にcountDownプロセスを実行しているようです。

したがって、このカウントダウンプロセスは、各宣言の1回または1回だけ呼び出されます。totaltimettime? countDownを何度もエコーすると、非常にD.R.Yを使用していません。プロセス。あなたのテーブルの最後にcountDownを1回だけ呼び出す場合は、countDownを1回しか実行できず、その最後の宣言はttimeになります。

私の暫定的な解決策は、単にあなたの$row['flightdatetime']をあなたのdomにエコーすることです。 (これは、/をより良好生産対応技術変数ストレージを微調整が、カウントダウンプロセスはすべてのタイムスタンプに適用されるように、あなたは、一意のタイムスタンプを識別していることを確認すべきであることができる部分である。

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

。そして、すべての.demoの要素に関数を適用するにはJavaScriptを頼む

繰り返しますが、私は個人的に生産の準備ができて、このスニペットを呼び出すことはありませんが、これはあなたの事を得るための一つの方法を刻々と過ぎて表示されます:上の(簡単な案をjsfiddleおよびiniを隠す準備が整ったjsfiddle

<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> 
+0

@Razor大丈夫、最初の草案では緑のダニを獲得しませんでした(countDownが始まる前にphpの初期タイムスタンプ値を表示していたためです)。私は 'data-val'を使用して私の答えを更新して、目に見えないほど値を保存し、更新されたjsfiddleを追加しました。これはグリーンティックを獲得するはずです。 – mickmackusa

関連する問題