db中多行的倒计时时间

Question

我正在为db中的多行倒计时工作。 我有不同的时间存储在我的数据库..我希望脚本下面显示每行的倒计时时间..

<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 } ?>

对于DB

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');

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

请告诉我该怎么做

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++;} ?>