How to get value from a tag and increase it's value by 1 every second?

Question

I'm making an ajax call which is returning me a string of 40:12:59 for example. That string comes with a td already wrapped around it.

How can I start counting the seconds up from there?

I could also return the complete Timestamp (e.g. 1564061259) and start working from there. But in the end, I need a date format like I specified above.

The Ajax call from the page I want to display the data:

    <div id="result"></div>

<script>

function load_data()
{
    $.ajax({
        url:"_overview.php",
        method:"POST",
        success:function(data)
        {
            $('#result').html(data);
        },
        complete: function(){
        $('#loading-image').hide();
        }
    });
}

load_data()

</script>

Check the 7th last line. This is the value I am intending to increment by one every second on the frontend. this file ("_overview.php") is the file im making the request to.

<?php
include '../../variables.php';
include '../../_Database.php';
$db = Database::getInstance();



        echo '    <table class="table" style="zoom: 1;">';
        echo '        <thead class="thead-dark">';
        echo '            <tr>';
        echo '                <th scope="col">Auftrag</th>';
        echo '                <th scope="col">Artikel</th>';
        echo '                <th scope="col">Voraussichtliches Ende</th>';
        echo '                <th scope="col">Stillstand</th>';
        echo '                <th scope="col">Einrichtzeit</th>';
        echo '                <th scope="col">Avg TPP</th>';
        echo '                <th scope="col">Auftragsstart</th>';
        echo '                <th scope="col">Laufzeit</th>';
        echo '            </tr>';
        echo '        </thead>';
        echo '        <tbody>';

        $result = mysqli_query($db->link, "SELECT * FROM `Workorder` WHERE isLocked = 0");
        while ($row = mysqli_fetch_assoc($result))
        {   

            $wo = $row['idWorkOrder'];
            $article = $db->getArticle($wo);
            $articleString = $db->getArticleString($db->getArticle($wo));
            $db->getAllTimeStamps($wo);
            $estimatedCompletion;
            $estimatedCompletionFormatted;
            if ($db->getEstimatedCompletion($wo) == 0)
            {
                $estimatedCompletionFormatted = "no data";
            }
            else
            {
                $estimatedCompletion = $db->getEstimatedCompletion($wo) + time();
                $estimatedCompletionFormatted = date('Y-m-d -  H:i:s', $estimatedCompletion);
            }

            $machinePerformance = $db->machinePerformance($wo);
            $machinePerformance = ($machinePerformance - 100) * - 1;

            $configPerformance = $db->getConfigPerformance($wo);
            $configPerformance = ($configPerformance - 100) * - 1;

            $avgTimePerPiece = $db->calculateAverageTimePerPieceTotal($wo);
            $firstTimeStamp = $db->getFirstTimeStamp($wo);
            $start = date('Y-m-d -  H:i:s', $firstTimeStamp);

            $mostRecentTimeStamp = $db->getMostRecentTimeStamp($wo);
            $timeInProduction = $mostRecentTimeStamp - $firstTimeStamp;

            $timeInProductionFormatted = floor($timeInProduction / 3600) . 
            gmdate(":i:s", $timeInProduction % 3600);


            echo '            <tr>';
            echo '                <td>'. $wo .'</td>';
            echo '                <td>'.$articleString.'</td>';
            echo '                <td>'.$estimatedCompletionFormatted.'</td>';
            echo '                <td>'.$machinePerformance.'%</td>';
            echo '                <td>'.$configPerformance.'%</td>';
            echo '                <td>'.(int)$avgTimePerPiece.'</td>';
            echo '                <td>'.$start.'</td>';
            echo '                <td>'.$timeInProductionFormatted.'</td>';
            echo '            </tr>';
        }

    echo '        </tbody>';
    echo '    </table>';

?>

Answer 1

You can use setInterval() to update the seconds, then create more functions to trigger the change of minutes and hours.