JavaScript - Realizar reloj con cuenta regresiva pasandole el tiempo

 
Vista:
sin imagen de perfil
Val: 4
Ha disminuido su posición en 12 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Realizar reloj con cuenta regresiva pasandole el tiempo

Publicado por Jesus Alonso (6 intervenciones) el 06/12/2019 13:01:23
Buenas, el día de hoy tengo un pequeño problema relacionado a un reloj con cuenta regresiva, tengo un código con el que hago una cuenta regresiva tomando en cuenta un valor dado en segundos (ejemplo si coloco 20 me cuenta de 20 segundos a 0, si coloco 60 de 1 minuto a 0 y asi).
La idea es, adaptar ese código a una base de datos donde tengo 2 parámetros, hora de inicio y hora de fin, calculo su respectiva diferencia y ese parámetro es el que le paso al contador para que comience a realizar la cuenta regresiva, ¿Cómo podría hacer eso?, Anexo ambos códigos abajo.

1)Codigo de cuenta regresiva
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
<head>
</head>
 
<body>
<h1>Cuenta atras</h1>
<h2 id="CuentaAtras"></h2>
 
<script language="JavaScript">
<!--
/* Determinamos el tiempo total en segundos */
var totalTiempo=120;
var timestampStart = new Date().getTime();
var endTime=timestampStart+(totalTiempo*1000);
var timestampEnd=endTime-new Date().getTime();
/* Variable que contiene el tiempo restante */
var tiempRestante=totalTiempo;
/* Ejecutamos la funcion updateReloj() al cargar la pagina */
updateReloj();
function updateReloj() {
    var Seconds=tiempRestante;
    var Days = Math.floor(Seconds / 86400);
    Seconds -= Days * 86400;
    var Hours = Math.floor(Seconds / 3600);
    Seconds -= Hours * (3600);
    var Minutes = Math.floor(Seconds / 60);
    Seconds -= Minutes * (60);
    var TimeStr = ((Days > 0) ? Days + " dias " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds);
    /* Este muestra el total de hora, aunque sea superior a 24 horas */
    //var TimeStr = LeadingZero(Hours+(Days*24)) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds);
    document.getElementById('CuentaAtras').innerHTML = TimeStr;
    if(endTime<=new Date().getTime())
    {
        document.getElementById('CuentaAtras').innerHTML = "00:00:00";
    }else{
        /* Restamos un segundo al tiempo restante */
        tiempRestante-=1;
        /* Ejecutamos nuevamente la función al pasar 1000 milisegundos (1 segundo) */
        setTimeout("updateReloj()",1000);
    }
}
/* Funcion que pone un 0 delante de un valor si es necesario */
function LeadingZero(Time) {
    return (Time < 10) ? "0" + Time : + Time;
}
//-->
</script>
</body>
</html>

2) Código php con las variables inicio, fin y calculo de diferencia.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
    include("conectar/conectar.php");
    $id = $_GET["id"];
    $consulta = mysql_query("select * from acciones where id_usu='$id'");
    $arreglo = mysql_fetch_array($consulta);
    date_default_timezone_set("America/Caracas");
    $hora1 = new Datetime($arreglo["inicio"]);
    $hora2 = new Datetime($arreglo["fin"]);
    $diferencia = $hora1->diff($hora2);
    $hora = $diferencia->format('%h');
    $minuto = $diferencia->format('%i');
        if($hora=="0"){
            $viaje = $diferencia->format('%i');
        }else{
             if($minuto=="0"){
                 $viaje = $diferencia->format('%h');
            }else{
                 $viaje = $diferencia->format('%h:%i');
             }
        }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Viajando</title>
</head>
<body>
    <p style="color:white;font-weight:bold;">
      Aqui es donde mostraré el conteo
    </p>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder