[SOLUCIONADO] Dos cuentas atrás a la vez

waspeis · #1 (**permalink**) 31/05/2017, 02:51

Buenas,

Tengo una función en javascript que trabaja con dos variables, minutos y segundos. La función es una cuenta atrás que va mostrando el tiempo restante. Los minutos y segundos los obtengo mediante php accediendo a una base de datos.

A continuación pongo el código javascript:

Código Javascript:

Ver originalvar minutos = <?php echo $minutos ?>;
        var segundos = <?php echo $segundos ?>;
 
    function MiFuncionJS()
    {
        if(segundos>9) 
            document.getElementById('demo').innerHTML = "Redireccionando en " + minutos + ":" + segundos;
        else 
            document.getElementById('demo').innerHTML = "Redireccionando en " + minutos + ":0" + segundos;
            
        if(segundos==0 && minutos==0)
            document.getElementById('demo').innerHTML = "Cuenta finalizada!!!";
        else
        {
            if(segundos>0)
                segundos--;
            else if(segundos==0 && minutos>0)
            {
                segundos = 59;
                minutos--;
            }
            setTimeout("MiFuncionJS()", 1000);
        }
    }

demo es un elemento <p> creado antes en php

Esta función se carga en el evento onload de <body>

Esto me vale para mostrar una cuenta atrás, pero lo que quiero es mostrar varias cuentas atrás a la vez, dependiendo de la información guardada en la base de datos, puede que sea una cuenta atrás, dos, tres... y que se muestren al mismo tiempo

Esta función trabaja bien cuando se pasa un tiempo en minutos y segundos, pero dependiento de la información guardada en la base de datos tendría que pasar varios tiempos, es decir, varias variables con minutos y segundos. Tendría que modificar la función pero el número de variables es indeterminado...

Se podría llamar a la misma función de alguna forma para que muestre todos los tiempos a la vez?

Gracias

xfxstudios · #2 (**permalink**) 31/05/2017, 06:32

podrias crear objeros a partir de la consulta a php:

Código Javascript:

Ver originalvar obj1 = {
minutos:1,
segundos:10,
elemento:'reg1'
}
var obj2 = {
minutos:0,
segundos:30,
elemento:'reg2'
}
 
    function MiFuncionJS(X)
    {
        if(X.segundos>9) 
            $('#'+X.elemento).html("Redireccionando en " + X.minutos + ":" + X.segundos);
        else 
            $('#'+X.elemento).html("Redireccionando en " + X.minutos + ":0" + X.segundos);
            
        if(X.segundos==0 && X.minutos==0)
               $('#'+X.elemento).html("Cuenta Finalziada");
        else
        {
            if(X.segundos>0)
                X.segundos--;
            else if(X.segundos==0 && X.minutos>0)
            {
                X.segundos = 59;
                X.minutos--;
            }
            /*setTimeout(function(){
                MiFuncionJS(X)
            }, 1000);*/
        }
    }
    
setInterval(function(){
    MiFuncionJS(obj1);
},1000);
 
setInterval(function(){
    MiFuncionJS(obj2);
},1000);

Muestra:
[JSFIDDLE="https://jsfiddle.net/tzadatxs/"][/JSFIDDLE]

waspeis · #3 (**permalink**) 01/06/2017, 12:30

Funciona perfectamente, gracias

Pero no entiendo una cosa:

Esta es mi línea:

Código Javascript:

Ver originaldocument.getElementById('demo').innerHTML = "Redireccionando en " + minutos + ":" + segundos;

Y esta es la de tu código:

Código Javascript:

Ver original$('#'+X.elemento).html("Redireccionando en " + X.minutos + ":" + X.segundos);

Qué es el símbolo dólar? El dólar es lo mismo que document.getElementById?

Qué es '#'? A qué hace referencia?

Y el .html es lo mismo que .innerHTML para hacer referencia al contenido del span?

Gracias!

xfxstudios · #4 (**permalink**) 01/06/2017, 15:23

no una es javascript puro, es decir la primera y la otra es con Jquery

$ eds la referencia a Jquery.
'#' le indicas a Jquery que buscas una id.
.html() es el equivalente a innerHTML en jquery

waspeis · #5 (**permalink**) 02/06/2017, 05:18

Ok

Gracias!!!