Progressive Chronometer Updating div

Asked

Viewed 499 times

1

I would like to know how to make a progressive stopwatch, visible on the screen and every 60 seconds update a div that the code searched for another PHP file.

If possible, I would like hour minutes and seconds were printed separately for better positioning on the screen.

Below follows the second file I will call every 60 seconds:

<?php

date_default_timezone_set('America/Sao_Paulo');

$d = date('d');
$m = date('m');
$y = date('Y');
$h = date('H');
$i = date('i');
$s = date('s');

#setando a primeira data  10/01/2008 
$dia1 = mktime(22,45,00,04,04,2019);

#setando segunda data 10/02/2008
$dia2 = mktime($h,$i,$s,$m,$d,$y);  

#armazenando o valor da subtracao das datas
$d3 = ($dia2-$dia1);

#usando o round para arrendondar os valores
#converter o tempo em dias
$dias = round(($d3/60/60/24));

#converter o tempo em horas
$hrs = round(($d3/60/60));

#converter o tempo em minutos
$mins = round(($d3/60));

#exibindo  minutos
echo '<b>2Quilos: </b>'.$mins."<br>";
php

  • Fabio, how are you doing so far?

  • put the code above the file that will be updated by the chronometer. That part of the chronometer I do not know how to do

1 answer

1


html chronometer.

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script type="application/javascript">
        $(function () {
            /* Disparando requisicao ao carregar */
            getValue();
            setChronometer();
            /* Disparando requisicao a cada 60 segundos */
            setInterval(
                function(){
                    getValue();
                    setChronometer();
                }, 60000
            );
            /* Usando moment.js */
            var interval = setInterval(
                function() {
                    var newMoment = moment();
                    $('#time').html(newMoment.format('HH:mm:ss'));
                    $('#h').html(newMoment.format('HH'));
                    $('#m').html(newMoment.format('mm'));
                    $('#s').html(newMoment.format('ss'));
                }, 100
            );
        });
        /**
        * Recupera um objetoc JSON
        * @return void
        */
        function getValue(){
            var newMoment = moment();
            $.post("cronometro.php",{},
                function (resp) {
                    $('#variavel').html(resp.variavel);
                    $('#last_update').html(newMoment.format('HH:mm:ss'));
                }
            );
        }
        /**
        * Contador progressivo (60 segundos)
        * @return void
        */
        function setChronometer(){
            var counter = 0;
            var interval = setInterval(
                function() {
                    counter++;
                    $('#counter').html(counter);
                    if (counter == 60) {
                        clearInterval(interval);
                    }
                }, 1000
            );
        }
    </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Vari&aacute;vel</td>
            <td>&Uacute;ltima atualiza&ccedil;&atilde;o</td>
            <td>Rel&oacute;gio</td>
        </tr>
        <tr>
            <td><div id="variavel"></div></td>
            <td><div id="last_update"></div></td>
            <td><div id='time'></div></td>
        </tr>
    </table>
    <br>
    <table border="1">
        <tr>
            <td>hora</td>
            <td>minuto</td>
            <td>segundo</td>
        </tr>
        <tr>
            <td>
                <div id="h"></div>
            </td>
            <td>
                <div id="m"></div>
            </td>

            <td>
                <div id="s"></div>
            </td>
        </tr>
    </table>
    <br>
    <table border="1">
        <tr>
            <td>Contando 60 segundos</td>
        </tr>
        <tr>
            <td>
                <div id="counter"></div>
            </td>
        </tr>
    </table>
</body>
</html>

php chronometer.

<?php

date_default_timezone_set('America/Sao_Paulo');

$d = date('d');
$m = date('m');
$y = date('Y');
$h = date('H');
$i = date('i');
$s = date('s');

#setando a primeira data  10/01/2008 
$dia1 = mktime(22,45,00,04,04,2019);

#setando segunda data 10/02/2008
$dia2 = mktime($h,$i,$s,$m,$d,$y);

#armazenando o valor da subtracao das datas
$d3 = ($dia2-$dia1);

#usando o round para arrendondar os valores
#converter o tempo em dias
$dias = round(($d3/60/60/24));

#converter o tempo em horas
$hrs = round(($d3/60/60));

#converter o tempo em minutos
$mins = round(($d3/60));

#exibindo  minutos
$variavel = "<b>2Quilos:&nbsp;</b>".$mins."<br>";
$last_update = $h.':'.$m.':'.$s;

$array = [
    'variavel' => $variavel
];

header('Content-type: application/json');
echo json_encode($array);

  • Partner is that same only the chronometer that is not running and wanted the separate timer <div>hour<div> <div>min<div> and <div>seconds<div>

  • Edited to show a clock (stopwatch?!) and hour minutes and seconds on divs separated in doc html using moment.js.

Browser other questions tagged php

You are not signed in. Login or sign up in order to post.