como hacer: Múltiples cuenta atrás

ripoll · #1 (**permalink**) 28/04/2009, 01:02

Buenas, estoy haciendo una cosilla con javascript y html (php), y necesitaria saber como poder crear múltiples cuentas atras con diferente número de inicialización.

Aquí el código para hacer 1 simpe cuenta atrás:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body onload="cuentaAtras();cuentaAtras1()">
<p> </p>

<p>
<script type="text/javascript">
var horas = 01 //establece las horas
var minutos = 10 //establece los minutos
var segundos = 05 //establece los segundos
var horas2,minutos2,segundos2

function cuentaAtras1(){

if(segundos > 0){
segundos--
}
else{
if(minutos > 0){
segundos = 59;
minutos--
}
else{
if(horas > 0){
minutos = 59;
horas--
}
}
}
ceros()
document.getElementById('ca').firstChild.nodeValue = horas2 + ":" + minutos2 + ":" + segundos2
if(horas > 0 || minutos > 0 || segundos > 0){
tiempo = setTimeout('cuentaAtras()',1000)
}
}
function cuentaAtras(){

if(segundos > 0){
segundos--
}
else{
if(minutos > 0){
segundos = 59;
minutos--
}
else{
if(horas > 0){
minutos = 59;
horas--
}
}
}
ceros()
document.getElementById('ca').firstChild.nodeValue = horas2 + ":" + minutos2 + ":" + segundos2
if(horas > 0 || minutos > 0 || segundos > 0){
tiempo = setTimeout('cuentaAtras()',1000)
}
}
function ceros(){
segundos.toString().length < 2 ? segundos2="0" + segundos : segundos2 = segundos
minutos.toString().length < 2 ? minutos2="0" + minutos : minutos2 = minutos
horas.toString().length < 2 ? horas2="0" + horas : horas2 = horas
}
function escribe(){
ceros()
document.write ('<span id="ca">' + horas2 + ":" + minutos2 + ":" + segundos2 + '</span>')
}

</script>
</p>
<p>
<script type="text/javascript">escribe()</script>

</p>
</body>
</html>

#2 (**permalink**) 28/04/2009, 10:56

No suelo dar código hecho, pero el problema me resultó bastante interesante.
Básicamente lo que tienes que hacer es aprovechar las capacidades de POO que te da Javascript, y crear 2 objetos "cuenta regresiva" con similares características.

Este código funciona, supongo que sabrás adaptarlo pero cualquier duda andaré por acá

Saludos.

Código javascript:

Ver original<script>
/* código de Douglas Crockford, para crear un objeto que hereda de otro
 http://javascript.crockford.com/prototypal.html
*/
if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}
 
 
var cuentaAtras = {
    intervalID : 0,
    horas : 0,
    minutos : 0,
    segundos : 0,
 
    inicializar : function(horas, minutos, segundos) {
        this.horas = horas;
        this.minutos = minutos;
        this.segundos = segundos;
    },
    
    restar : function() {
        if(this.segundos > 0) {
            this.segundos--;
        } else{
            if (this.minutos > 0) {
                this.segundos = 59;
                this.minutos--;
            } else {
                if(this.horas > 0) {
                    this.minutos = 59;
                    this.horas--;
                }
            }
        }
    },
 
    mostrar : function(nodo) {
        if ( (this.horas === this.minutos) && (this.minutos == this.segundos) && (this.segundos == 0) ) {
            this.terminado(nodo);
        } else {
            var tiempo = [ this.horas, this.minutos, this.segundos ];
            for (i=0; i < 3; i++) {
                if (tiempo[i] < 10) tiempo[i] = "0" + tiempo[i];
            }
            nodo.innerHTML = tiempo.join(':');
        }
    },
 
    terminado : function(nodo) {
        nodo.innerHTML = 'TERMINADO!';
        window.clearInterval(this.intervalID);
    }
 
};
 
 
var cuentaAtras1 = Object.create(cuentaAtras);
var cuentaAtras2 = Object.create(cuentaAtras);
 
cuentaAtras1.inicializar(0, 0, 10);
cuentaAtras2.inicializar(2, 45, 0);
 
cuentaAtras1.intervalID = setInterval(function() {
    cuentaAtras1.mostrar(document.getElementById('coso1'));
    cuentaAtras1.restar();
}, 1000);
 
cuentaAtras2.intervalID = setInterval(function() {
    cuentaAtras2.mostrar(document.getElementById('coso2'));
    cuentaAtras2.restar();
}, 1000);
 
</script>
 
<span id="coso1"></span><br />
<span id="coso2"></span><br />

ripoll · #3 (**permalink**) 28/04/2009, 12:04

Buenas Alvlin!

grácias por tu respuesta! funciona perfectamente jeje

pero, la cuestion es que necesito tener X cuentas atrás, con lo que la X puede ser "ilimitada".

Provaré de utilizar tu código pasando "var cuentaAtras1 = Object.create(cuentaAtras);" como array y creando también varios "COSO-X".

Haver como sale el invento ;)

#4 (**permalink**) 28/04/2009, 12:16

No debería haber problemas en usar un vector de objetos que hereden del 'cuentaAtras' original, y luego quizás recorrerlo con un for.
La gracia de tener los "cosox" (debería haber elegido un nombre mejor

) es controlar el nodo en el que se mostrará el tiempo. Quizás también puedas tener un vector en el que guardes cada uno de los nodos que deben ser actualizados.

Saludos.

ripoll · #5 (**permalink**) 28/04/2009, 13:02

Vale, problema resuelto ;)

Aquí dejo el código para poder hacer múltiples cuentas atras (pasados por una variable en PHP), y mostrarlos en donde querais del documento html.

Variables a modificar:
$nombremm => esta variable (está casi al final del código), contiene el número de cuentas atrás que se tendrán que crear.

$hores[$x] => esta variable (array) contiene el número de horas para cada cuenta atras, empezando por $x = 1.

$minuts[$x] => lo mismo pero en minutos

$segons[$x] => lo mismo en segundos ;)

Y para mostrar la cuenta atrás por pantalla:::::

echo "<span id='coso".$numero."'></span>";

$numero => esta variable es el número de cuenta atrás al que haceis referencia, recordad que empieza desde el 1 hasta el número de la variable $nombremm

Código:

<script>

#
/* código de Douglas Crockford, para crear un objeto que hereda de otro
#
#
*/

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}
var cuentaAtras = {
    intervalID : 0,
    horas : 0,
    minutos : 0,
    segundos : 0,
    inicializar : function(horas, minutos, segundos) {
        this.horas = horas;
        this.minutos = minutos;
        this.segundos = segundos;
    },
    restar : function() {
        if(this.segundos > 0) {
            this.segundos--;
        } else{
            if (this.minutos > 0) {
                this.segundos = 59;
                this.minutos--;
            } else {
                if(this.horas > 0) {
                    this.minutos = 59;
                    this.horas--;
                }
            }
        }
    },
    mostrar : function(nodo) {
        if ( (this.horas === this.minutos) && (this.minutos == this.segundos) && (this.segundos == 0) ) {
            this.terminado(nodo);
        } else {
            var tiempo = [ this.horas, this.minutos, this.segundos ];
            for (i=0; i < 3; i++) {
                if (tiempo[i] < 10) tiempo[i] = "0" + tiempo[i];
            }
            nodo.innerHTML = tiempo.join(':');
        }
    },
    terminado : function(nodo) {
        nodo.innerHTML = 'TERMINADO';
		
		
		
		
		
		
        window.clearInterval(this.intervalID);
    }
};
<?php
echo "</script>";
	for($x=0;$x<$nombremm+1;$x++)
	{
	echo "<script>";
?>
<?php echo "var cuentaAtras".$x." = Object.create(cuentaAtras);"; ?>
cuentaAtras<?php echo $x; ?>.inicializar(<?php echo $hores[$x]; ?>, <?php echo $minuts[$x]; ?>, <?php echo $segons[$x]; ?>);
cuentaAtras<?php echo $x; ?>.intervalID = setInterval(function() {
    cuentaAtras<?php echo $x; ?>.mostrar(document.getElementById('coso<?php echo $x; ?>'));
    cuentaAtras<?php echo $x; ?>.restar();
}, 1000);
</script>
<?php
 }
 ?>

Un saludo!