【问题标题】:Javascript Countdown Display in Php Table [closed]PHP表中的Javascript倒计时显示[关闭]
【发布时间】:2014-10-27 00:48:30
【问题描述】:

我有一个包含多个字段的数据库表,我想用其中一个字段的整数值(以分钟为单位)进行倒计时。我如何使用这些值循环并显示 php 表中每一行的倒计时,并在需要时增加或减少过程中的时间?

Table.php

            $sql="SELECT * FROM List where depName='Admisiones' and  personStatus='Espera'";
            $result=mysqli_query($con, $sql);

            echo "<table border='15' cellpadding='10' cellspacing='3' bordercolor='00FF00'>
            <tr>
            <th>Turno</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Segundo Apellido</th>
            <th>Id Studiante</th>
            <th>Status</th>
            <th>Multiples Motivos</th>
            <th>Tiempo Categoria</th>
            <th>Tiempo Estimando</th>
            </tr>";

            while($row = mysqli_fetch_array($result)) 
            {
                echo "<tr>";
                echo "<td>" . $row['listNum'] . "</td>";
                echo "<td>" . $row['personName'] . "</td>";
                echo "<td>" . $row['personLast'] . "</td>";
                echo "<td>" . $row['secondLast'] . "</td>";
                echo "<td>" . $row['stuId'] . "</td>";
                echo "<td>" . $row['personStatus'] . "</td>";
                echo "<td>" . $row['manyMotive'] . "</td>";
                echo "<td>" . $row['categoryTime'] . "</td>";                                   
                echo "<td>" . $row['estimatedTime']"</td>"; //USE THE CLOCK.PHP TO MAKE A COUNTDOWN FOR EACH ESTIMATED TIME.
                //And have the ability to add or substrac time if needed.
                echo "</tr>";
            }

            echo "</table>";

时钟.php

      <script>
      $('.countdown').each(function(){
      var minutes = $(this).data('minutes');
      var count  = $(this); //countdown
      var id = $(this).id;
      $(this).countdown({
      date     :  Date.now() + (minutes * 60000),
      refresh  :  1000
      });

      setInterval(function(count)
      var minuteValue = count.text();
       $.ajax({
           url     : 'TEST.php', //I created to make the test..
           type    : 'POST',
           data    : {currentMin : minuteValue, id:id},
           success : function(response){
               console.log(response);
           }

          });
       });
    });

TEST.php

    <?php

    include 'Connection.php';
        $minValue =  mysqli_real_escape_string($con,  $_POST['minuteValue']);
        $ID = mysqli_real_escape_string($con,  $_POST['id']);

        if (!$con) {
            die("Connection failed: " . mysqli_connect_error());
        }

        $sql ="Update List SET estimatedTime='$minValue' WHERE listNum='$ID'";
        mysqli_query($con,$sql);
        mysqli_close($con);
    ?>

【问题讨论】:

  • 目前还不清楚您要做什么。您可以发布一些代码并澄清您的问题吗?
  • 我拥有一切我只需要一种方法来实现它,因此时钟从$row['categoryTime'] 获取值并在$row['estimatedTime'] 行中进行倒计时。
  • 我不知道$row['categoryTime'] 里面有什么,但是如果我正确理解了您的评论,您需要将其传递给您的 countDownTime 函数。所以它看起来像这样:&lt;script&gt;countDownTime(&lt;?php echo $row['categoryTime']; ?&gt;);&lt;/script&gt; 并使用该数据进行倒计时。我将脚本标签放在 php 标签之外,但如果更容易的话,你可以连接。仍然不能 100% 确定我是否完全理解你。
  • $row['categoryTime'] 内部是一个整数,例如 30。但是脚本函数没有参数...如果我这样做,我会工作吗?如果是这样,你能给我一个例子,我可以在函数中捕获那个 var。
  • 很抱歉我缺乏知识,这是我第一次使用脚本。你能帮我把这两种语言混合起来让它工作吗:)

标签: javascript php html database


【解决方案1】:

好的,这就是我的做法。我会删除clock.php 并使用更复杂的东西。比如这个js插件:

http://rendro.github.io/countdown/

下载文件并将其包含在您的&lt;head&gt; 标记中。确保在此之前包含 jquery。

在你的 table.php 中更改这一行:

echo "<td>" . $row['estimatedTime']"</td>";

到:

echo "<td><div class=\'countdown\' data-minutes=\'{$row['categoryTime']}\' id=\{$row['id']'\'></div></td>";

基本上,您的倒计时字段的 html 必须如下所示(PS:30 是来自 'categoryTime' 的动态数字):

<td><div class="countdown" data-minutes="30" id="16"></div></td>

在该页面的页脚或您的 javascript 文件中包含此脚本:

<script>
   $('.countdown').each(function(){
      var minutes = $(this).data('minutes');
      var id = $(this).id;
      $(this).countdown({
         date     :  Date.now() + (minutes * 60000),
         refresh  :  60000
      });

      var minuteValue = $(this).text();
      setInterval(function(){

           $.ajax({
               url     : 'url/to/php/file', //php file that updates your DB. Take the values from POST VAR.
               type    : 'POST',
               data    : {currentMin : minuteValue, id:id},
               success : function(response){
                   console.log(response);
               }

           });
      });
   });



</script>

这样,您将遍历每个 .countdown 元素,从 data-minutes attr 获取其分钟数,并通过将这些分钟数添加到 Date.now() 值来告诉倒计时插件何时到期。

在您发表评论后进行编辑:

您正在寻找的是 node.js。那对你来说是完美的。但无论如何我已经更新了代码。它没有经过测试,所以我不知道这是否会起作用。应该是这样的。唯一的问题可能(可能)是为表中的每一行设置间隔。

EDIT2

  • 在 php 文件中,运行查询以更新 db 中的行
  • 取决于您的数据库,看看您是否可以获得受影响的行数
  • 如果受影响的行 > 0,则回显 1,否则回显 0
  • 在 Firebug(或类似的)中检查控制台消息以查看您的 php 输出或任何其他错误

这可能会帮助您找到问题所在

【讨论】:

  • 它工作得很好:D 谢谢。现在我想知道是否有一种方法可以在每次倒计时刷新时将值存储在数据库中的那个字段中?
  • 我也更新了代码,我按照你说的做了,但是没有更新。
  • 看看你是否按照我上面提到的那些步骤来尝试查找错误
  • 我发现变量 $_POST 有一个错误,它们都是空的。我使用整数值来测试它并且查询有效。控制台的输出是第一行中的 &lt;div class="countdown" data-minutes="10" id="1"&gt;00 hours, 07 min and 28 sec&lt;/div&gt;。在第二个中,id 更改为 2 等等......
  • 查看控制台时,您只对您的 php 脚本返回的内容感兴趣 - 无论是 0 还是 1。所以这样做以区分您的控制台输出:console.log('PHP RESPONSE ==== ' + response); 然后在控制台中查找它跨度>
猜你喜欢
  • 2013-03-15
  • 1970-01-01
  • 2014-02-28
  • 1970-01-01
  • 2019-03-13
  • 1970-01-01
  • 1970-01-01
  • 2011-12-08
  • 1970-01-01
相关资源
最近更新 更多