javascript - 数据库中多行的倒计时时间

Question

我正在研究这种数据库中多行的倒计时时间。我的数据库中存储了不同的时间。我希望下面的脚本显示每一行的倒计时时间。

<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript" src="jquery.countdownTimer.js"></script>

PHP代码

<?php $x = mysqli_query($con, "SELECT * FROM payment");
while($xx = mysqli_fetch_array($x))
{ ?>

HTML 和 Javascript

<span id="future_date"></span>
<script>
 $(function(){
 $('#future_date').countdowntimer({
 dateAndTime : "<?php echo $xx['stop_time']; ?>",
 size : "lg",
 regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
 regexpReplaceWith: "$1:$2:$3:$4"
 });
 });
 </script>

关闭php

<?php } ?>

对于数据库

INSERT INTO `user` (`id`, `userid`, `stop_time`) VALUES
(1, '3', '2017-04-20'),
(2, '2', '2017-04-12');
(3, '9', '2017-05-10');
(4, '3', '2017-03-22');
(5, '7', '2017-04-01');
(6, '9', '2017-04-10');

我使用代码但只显示一行而不是数据库中的所有行。

请告诉我该怎么做

Answer 1

您每次都在循环中覆盖 id 选择器。

为每个定时器制作唯一的id:

试试这个，让我知道它是否适合你。

<?php $x = mysqli_query($con, "SELECT * FROM payment");
$i=0;
while($xx = mysqli_fetch_array($x))
{ ?>

<span id="future_date_<?php echo $i ;?>"></span>
<script>
 $(function(){
     $('#future_date_<?php echo $i ;?>').countdowntimer({
         dateAndTime : "<?php echo $xx['stop_time']; ?>",
         size : "lg",
         regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
         regexpReplaceWith: "$1:$2:$3:$4"
     });
 });
 </script>

 <?php $i++;} ?>