Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Cuenta atrás Javascript

Estas en el tema de Cuenta atrás Javascript en el foro de Javascript en Foros del Web. Buenas, he realizado una cuenta atrás con javascript, el problema está en que no logro hacer que cuando termine quede en 0 y reinicie de ...
  #1 (permalink)  
Antiguo 15/02/2016, 10:04
El_Astur
Invitado
 
Mensajes: n/a
Puntos:
Cuenta atrás Javascript

Buenas,

he realizado una cuenta atrás con javascript, el problema está en que no logro hacer que cuando termine quede en 0 y reinicie de nuevo la cuenta atrás, ya que no tiene que redirigir a otro sitio ni nada....
¿Alguien sabría cómo se puede hacer?, mi código es:

html:

Código HTML:
<div id="countdown" class="timer"></div> 
Javascript:

Código HTML:
//cuenta atrás
        function randomIntFromInterval(min,max){
            return Math.floor(Math.random()*(max-min+1)+min);
        }
        var target_date = new Date(),
            base = 10 * 10 * 0.5,
            variable = randomIntFromInterval(0, base);
        target_date.setSeconds(target_date.getSeconds() + base + variable);
        // variables para las unidades de tiempo
        var hours, minutes, seconds;
        // conseguir elemento
        var countdown =  document.getElementById("countdown");
        var hours_span = document.createElement("SPAN");
        hours_span.className = 'hours';
        countdown.appendChild(hours_span);
        var minutes_span = document.createElement("SPAN");
        minutes_span.className = 'minutes';
        countdown.appendChild(minutes_span);
        var secs_span = document.createElement("SPAN");
        secs_span.className = 'secs';
        countdown.appendChild(secs_span);
        // actualizar la etiqueta con el id countdown cada 1 seg.
        setInterval(function () {
            // encontrar la cantidad de segundos entre hoy el día final
            var current_date = new Date().getTime();
            var seconds_left = (target_date - current_date) / 1000;
            // cálculos de tiempo
            hours = parseInt(seconds_left / 3600);
            seconds_left = seconds_left % 3600;
 
            minutes = parseInt(seconds_left / 60);
            seconds = parseInt(seconds_left % 60);
            // formato de string de cuenta atrás + valor de tag.
            hours_span.innerHTML = '<span>' + '0' + hours + '</span>' +  'Hours';
            minutes_span.innerHTML = '<span>' + '0' + minutes + '</span>' + 'Mins';
            secs_span.innerHTML = '<span>' + seconds + '</span>' + 'Secs';
 
        }, 1000);
Un saludo!!!
  #2 (permalink)  
Antiguo 15/02/2016, 12:51
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 6 meses
Puntos: 977
Respuesta: Cuenta atrás Javascript

Utiliza una condición para averiguar si los valores de las variables son iguales a cero. Cuando eso ocurra, vuelve a ejecutar el código previo al temporizador, para lo cual te convendrá agruparlo en una función. Por ejemplo.

Un saludo
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 16/02/2016, 03:02
El_Astur
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Cuenta atrás Javascript

Buenas Alexis,

muchas gracias por la aportación, es una manera de enfocarlo quizás más optimizada que la mía.
Yo lo he sacado al fnal adaptando un poco el código, dejo también el ejemplo por si le puede servir a alguien:

Código Javascript:
Ver original
  1. //cuenta atrás
  2.     function randomIntFromInterval(min,max){
  3.         return Math.floor(Math.random()*(max-min+1)+min);
  4.     }
  5.  
  6.     var target_date = new Date()
  7.     function start(target_date)
  8.     {
  9.         target_date = new Date();
  10.         base = 10 * 10 * 1.5;
  11.         variable = randomIntFromInterval(0, base);
  12.         target_date.setSeconds(target_date.getSeconds() + base + variable);
  13.         return target_date;
  14.     }
  15.  
  16.     target_date=start(target_date);
  17.     // variables para las unidades de tiempo
  18.     var hours, minutes, seconds;
  19.     // conseguir elemento
  20.     var countdown =  document.getElementById("countdown");
  21.     var hours_span = document.createElement("SPAN");
  22.     hours_span.className = 'hours';
  23.     countdown.appendChild(hours_span);
  24.     var minutes_span = document.createElement("SPAN");
  25.     minutes_span.className = 'minutes';
  26.     countdown.appendChild(minutes_span);
  27.     var secs_span = document.createElement("SPAN");
  28.     secs_span.className = 'secs';
  29.     countdown.appendChild(secs_span);
  30.     // actualizar la etiqueta con el id countdown cada 1 seg.
  31.     setInterval(function () {
  32.         // encontrar la cantidad de segundos entre hoy el día final
  33.         var current_date = new Date().getTime();
  34.         var seconds_left = (target_date - current_date) / 1000;
  35.         // cálculos de tiempo
  36.         hours = parseInt(seconds_left / 3600);
  37.         seconds_left = seconds_left % 3600;
  38.  
  39.         minutes = parseInt(seconds_left / 60);
  40.         seconds = parseInt(seconds_left % 60);
  41.         // formato de string de cuenta atrás + valor de tag.
  42.         hours_span.innerHTML = '<span>' + '0' + hours + '</span>' +  'Hours';
  43.         minutes_span.innerHTML = '<span>' + '0' + minutes + '</span>' + 'Mins';
  44.         secs_span.innerHTML = '<span>' + seconds + '</span>' + 'Secs';
  45.  
  46.         if(seconds_left<=0)
  47.             target_date=start(target_date);
  48.  
  49.     }, 1000);

Muchas gracias!!!

Etiquetas: html, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:27.