Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Contador decreciente de tiempo en Javascript

JavaScript - Contador decreciente de tiempo en Javascript

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Contador decreciente de tiempo en Javascript

Publicado por Jose Luis (3 intervenciones) el 17/01/2014 13:17:04
Bueno la cuestión es que estoy haciendo un contador en una función de javascript, que le paso por parametro 3 variables (horas, minutos y segundos) y quiero que me lo muestre en un div que he creado en html con la siguiente línea: <div id="reloj" />

También para llamar a la función desde html hago el script siguiente:
1
2
3
4
<script language='JavaScript'>
                var horas = 2;
                muestraReloj(12,11,20);
            </script>

Y por ultimo el código de la función es :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function muestraReloj(hora,min,seg) {
  var horas = hora;
  var minutos = min;
  var segundos = seg;
 
  if (segundos === 0){ segundos=59; minutos--;}
  if (minutos === 0){ minutos=59; horas--;}
 
  var string = "";
  string += horas +':'+ minutos + ':'+ segundos;
  document.getElementById("reloj").innerHTML = string;
 
  segundos --;
  setInterval(muestraReloj(horas,minutos,segundos), 1000);
}

La cuestión está en que me imprime por pantalla el tiempo que le he introducido : 9:24:27 y si actualizo la página 9:24:50. Que son número que no tienen nada que ver con los que yo he introducido, ni tampoco se me actualiza el contador segundo a segundo que es lo que yo quiero.

Un saludo y gracias
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
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Contador decreciente de tiempo en Javascript

Publicado por xve (2100 intervenciones) el 17/01/2014 15:43:46
Hola Jose Luis, si quieres utilizar setInterval() tienes que sacarlo de dentro de la función, sino crea un montón de peticiones, ya que cada vez que entra, genera otro nuevo bucle cada segundo y se suma a los ya creados...

Prueba así haber que te parece:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="reloj" />
 
<script>
horas = 12;
minutos = 11;
segundos = 20;
 
function muestraReloj() {
    console.log("a");
    if (segundos === 0){ segundos=59; minutos--;}
    if (minutos === 0){ minutos=59; horas--;}
 
    var string = "";
    string += horas +':'+ minutos + ':'+ segundos;
    document.getElementById("reloj").innerHTML = string;
 
    segundos --;
}
setInterval(muestraReloj, 1000);
</script>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Contador decreciente de tiempo en Javascript

Publicado por Jose Luis (3 intervenciones) el 18/01/2014 17:28:02
Sigue sin salirme muy bien, la cuestión está en que yo quiero pasarle por parámetro el tiempo, en este caso en horas minutos y segundos, puede ser pasado en segundos solo para que sea menos complejo, pero si como tú dices la función cada vez que se llama crea un intervalo nuevo, entonces no puedo pasarle por parámetro ningún valor, esta función la quiero tener en una libreria de javascript "a parte" para poder llamarla cuando yo quiera en mi código html con distintos valores, poniendo así el script le pongo definidos unos valores, o tengo que estar reescribiendo la función todo el tiempo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Contador decreciente de tiempo en Javascript

Publicado por Jose Luis (3 intervenciones) el 18/01/2014 17:55:40
Vale, después de un rato ya he conseguido que me vaya, la función queda así:


1
2
3
4
5
6
7
8
9
10
11
function muestraReloj() {
 
  if (segundos === 0){ segundos=59; minutos--;}
  if (minutos === 0){ minutos=59; horas--;}
 
  segundos --;
  var string = "";
  string += horas +':'+ minutos + ':'+ segundos;
  document.getElementById("reloj").innerHTML = string;
 
}

y la llamada al código, que es lo que estaba mal:

1
2
3
4
5
6
<script language='JavaScript'>
                var horas = 12;
                var minutos = 11;
                var segundos = 20;
                setInterval(function(){muestraReloj(horas,minutos,segundos);}, 1000);
            </script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Contador decreciente de tiempo en Javascript

Publicado por xve (2100 intervenciones) el 18/01/2014 19:37:43
Hola Jose Luis, gracias por comentarlo, pero lo veo muy extraño, ya que llamas a la función muestraReloj() pasando-le parámetros cuando la función no espera ningún parámetro...
Si lo quieres hacer para tener en tu biblioteca de funciones, te recomiendo utilizas las clases de javascript... aquí te he realizado un ejemplo:

archivo reloj.js
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
var reloj={
    horas:0,
    minutos:0,
    segundos:0,
    idDestino:"reloj",
 
    mostrar:function()
    {
        if (reloj.segundos>0 || reloj.minutos>0 || reloj.horas>0)
        {
            reloj.segundos--;
            if (reloj.segundos < 0)
            {
                reloj.segundos=59;
                reloj.minutos--;
            }
            if (reloj.minutos < 0)
            {
                reloj.minutos=59;
                reloj.horas--;
            }
 
            var string=reloj.doscaracteres(reloj.horas)+':'+reloj.doscaracteres(reloj.minutos)+':'+reloj.doscaracteres(reloj.segundos);
            document.getElementById(reloj.idDestino).innerHTML = string;
        }
    },
 
    iniciar:function()
    {
        setInterval(reloj.mostrar, 1000);
    },
 
    doscaracteres:function(numero)
    {
        if(String(numero).length==1)
            return "0"+numero;
        return numero;
    },
}

Tu página html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="reloj.js"></script>
</head>
 
<body>
 
    <div id="reloj"></div>
    <script>
        var miReloj=reloj;
        miReloj.horas=12;
        miReloj.minutos=10;
        miReloj.segundos=20;
        miReloj.iniciar();
    </script>
</body>
</html>

De esta manera podrás utilizar tu cuenta atrás donde lo desees añadiendo muy poco código en tu pagina html.

Espero que te sirva... ya nos comentaras...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Contador decreciente de tiempo en Javascript

Publicado por antonio (1 intervención) el 09/11/2015 20:50:56
Buenas he insertado el código en una pagina de prueba y el contador se reinicia cada vez que recargo la página, me podías dar alguna sugerencia.
Mil gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar