Código de JavaScript - Cuenta atras hasta una fecha

Imágen de perfil

Cuenta atras hasta una fechagráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(7)
Publicado el 19 de Noviembre del 2006 por Administrador
17.685 visualizaciones desde el 19 de Noviembre del 2006. Una media de 35 por semana
Código que muestra la cuenta atras hasta una fecha determinada.

Versión 1
estrellaestrellaestrellaestrellaestrella(7)

Publicado el 19 de Noviembre del 2006gráfica de visualizaciones de la versión: Versión 1
17.686 visualizaciones desde el 19 de Noviembre del 2006. Una media de 35 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<html>
<head>
<script>
//Codigo que muestra la cuenta atras hasta el final del año 2010
//La Web del Programador
//http://www.lawebdelprogramador.com
 
//variables que determinan la fecha y hora final de la cuenta atras
toYear=2010;
toMonth=12;
toDay=31;
toHour=23;
toMinute=59;
toSecond=59;
 
function countDown()
{
	new_year=0;
	new_month=0;
	new_day=0;
	new_hour=0;
	new_minute=0;
	new_second=0;
	actual_date=new Date();
 
	if(actual_date.getFullYear()>toYear)
	{
		//si ya nos hemos pasado del año, mostramos los valores a 0
		form.second.value=0;
		form.minute.value=0;
		form.hour.value=0;
		form.day.value=0;
		form.month.value=0;
		form.year.value=0;
	}else{
		new_second=new_second+toSecond-actual_date.getSeconds();
		if(new_second<0)
		{
			new_second=60+new_second;
			new_minute=-1;
		}
		form.second.value=new_second;
 
		new_minute=new_minute+toMinute-actual_date.getMinutes();
		if(new_minute<0)
		{
			new_minute=60+new_minute;
			new_hour=-1;
		}
		form.minute.value=new_minute;
 
		new_hour=new_hour+toHour-actual_date.getHours();
		if(new_hour<0)
		{
			new_hour=24+new_hour;
			new_day=-1;
		}
		form.hour.value=new_hour;
 
		new_day=new_day+toDay-actual_date.getDate();
		if(new_day<0)
		{
			x=actual_date.getMonth();
			if(x==0||x==2||x==4||x==6||x==7||x==9||x==11){new_day=31+new_day;}
			if(x==3||x==5||x==8||x==10){new_day=30+new_day;}
			if(x==1)
			{
				//comprobamos si es un año bisiesto...
				if(actual_date.getYear()/4-Math.floor(actual_date.getYear()/4)==0)
				{
					actual_date=29+actual_date;
				}else{
					actual_date=28+actual_date;
				}
			}
		}
		form.day.value=new_day;
 
		new_month=-1;
		new_month=new_month+toMonth-actual_date.getMonth();
		if(new_month<0)
		{
			new_month=11+new_month;
			new_year=-1;
		}
		form.month.value=new_month;
 
		new_year=new_year+toYear-actual_date.getFullYear();
		if(new_year<0)
		{
			form.year.value=0;
		}else{
			form.year.value=new_year;
			//vuelve a ejecutar la funcion dentro de 1000 milisegundos = 1 segundo
			setTimeout("countDown()",1000);
		}
	}
}
</script>
 
<style type="text/css">
.form_input
{
	font-family: Verdana;
	font-size: 12;
	color: #ffffff;
	border-width: 0;
	background-color: #000077;
	text-align: right;
}
</style>
 
</head>
 
<!--Al iniciar la pagina, ejecutamos la funcion-->
<body onload="countDown();">
 
<!--formulario deshabilitado donde se muestran los datos-->
<form name="form">
Tiempo que falta hasta el fin del año 2010.<br><br>
<input type="text" size="5" class="form_input" name="year" disabled> años<br>
<input type="text" size="5" class="form_input" name="month" disabled> meses<br>
<input type="text" size="5" class="form_input" name="day" disabled> dias<br>
<input type="text" size="5" class="form_input" name="hour" disabled> horas<br>
<input type="text" size="5" class="form_input" name="minute" disabled> minutos<br>
<input type="text" size="5" class="form_input" name="second" disabled> segundos<br>
</form>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (7)

Marina
22 de Noviembre del 2006
estrellaestrellaestrellaestrellaestrella
Muy bueno!! Anda barbaro! Gracias!
Responder
lampras
30 de Junio del 2007
estrellaestrellaestrellaestrellaestrella
a mi no me aparece dentro de las cajas ni los dias, horas, etc... Si lo hago en hoja en blanco funciona pero en mi web que ya esta hecah no, porque?
Responder
Moises
18 de Julio del 2008
estrellaestrellaestrellaestrellaestrella
Hola, me gustaría insertar una tabla para que los datos se muestren en centrados o a la derecha del html. Que debo agregar?
Responder
lenin ordaz
08 de Octubre del 2008
estrellaestrellaestrellaestrellaestrella
muy bueno ese codigo chamo, yo lo quise agregar en una tabla haciendolo por medio de un include, aja ahi no tuve problema, el problema es q no me esta mostrando los valores en cuanto al tiempo restante en años meses dias.... yo intente modificarlo por medio del style. pero el problemita persiste, chamo si pudieras ayudarme seria buenisimo.... ahi te dejo mi correo para el contacto. gracias men.....
Responder
Enjey
01 de Noviembre del 2010
estrellaestrellaestrellaestrellaestrella
Esta muy bien pero me pasa lo miamo,no me sale la cuenta atras,como se hace para que salga?

en otro codigo de cuenta atras si me aparecio pero en este que es el que me interesa no.

Me pueden ayudar?
Graciasss
Responder
juanjo
04 de Enero del 2012
estrellaestrellaestrellaestrellaestrella
Hola, esta muy completo y bonito el contador, pero me gustaria saber como hacer para que una vez llega a 0 se abra una alerta, ou un popup, supongo que sera bastante sencillo pero no se donde ponerlo. gracias de antemano espero que me contextes
Responder
Xavier
11 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Gracias, muy bueno. Saludos
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s1430