doulun1939
2014-10-27 00:48 阅读 30

Php表中的Javascript倒计时显示[关闭]

I have a db table with several fields and i want to make a countdown with the integer value of one of the fields (as minutes). How can i loop and display the countdown of each of those rows in a php table using these values and adding or subtracting time in the process if I need to?

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>";

Clock.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);
    ?>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    doujia1988 doujia1988 2014-10-27 03:55

    OK, here's how I would do it. I would delete clock.php and use something more sophisticated. For example this js plugin:

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

    Download the file and include it in your <head> tag. Make sure you include jquery before that.

    Inside your table.php change this line:

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

    to:

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

    Basically your html for that countdown field has to look like this (PS:30 is dynamic number coming from 'categoryTime') :

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

    In footer of that page or in your javascript file include this script:

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

    With this, you will loop thru each .countdown element, get its minutes from data-minutes attr, and tell the countdown plugin when timer should expire by adding those minutes to Date.now() value.

    EDIT after your comment:

    What you are looking for is node.js. That would be perfect for you. But I've updated the code anyways. It is not tested so I don't know if that's gonna work. It should be something like that. The only issue could (MAYBE) be in setting interval for each row in your table.

    EDIT2

    • in php file, run query that updates rows in db
    • depending on your DB, see if you can get number of rows affected
    • if affected rows > 0, echo 1, otherwise echo 0
    • in Firebug (or similar) check the console message to see output of your php or any other errors

    This might help you find where the problem lies

    点赞 评论 复制链接分享

相关推荐