Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Cuenta atrás Js

JavaScript - Cuenta atrás Js

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

Cuenta atrás Js

Publicado por Pablo (4 intervenciones) el 15/02/2016 13:18:56
Buenas,

he realizado una cuenta atrás con javascript, el problema está en que no logro hacer que cuando termine quede en 0 o reinicie de nuevo otra 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:

1
<div id="countdown" class="timer"></div>

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
//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);

Agredecería la ayuda ya que no logro encontrar la forma de realizarlo.
Un saludo!!!!
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

Cuenta atrás Js

Publicado por xve (2100 intervenciones) el 15/02/2016 17:25:58
Hola Pablo, te lo he modificado un poco, para que vaya iniciando nuevamente la cuenta atras...

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
<div id="countdown" class="timer"></div>
 
<script>
 
	//cuenta atrás

	function randomIntFromInterval(min,max){
		return Math.floor(Math.random()*(max-min+1)+min);
	}
 
	var target_date = new Date()
	function start(target_date)
	{
		target_date = new Date();
		base = 10 * 10 * 0.5;
		variable = randomIntFromInterval(0, base);
		target_date.setSeconds(target_date.getSeconds() + base + variable);
		return target_date;
	}
 
	target_date=start(target_date);
	// 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';
 
		if(seconds_left<=0)
			target_date=start(target_date);
 
	}, 1000);
</script>

Si hay algo que no entiendes....
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
sin imagen de perfil

Cuenta atrás Js

Publicado por Pablo (4 intervenciones) el 15/02/2016 17:34:28
Holas xve,

lo entiendo perfectamente, no me había dado por plantearlo de esa manera. Muchas 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