Código de JavaScript - Cuenta atras hasta una fecha

Versión 1
estrellaestrellaestrellaestrellaestrella(9)

Publicado el 19 de Noviembre del 2006gráfica de visualizaciones de la versión: Versión 1
29.183 visualizaciones desde el 19 de Noviembre del 2006
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 (9)

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
8 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
1 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
4 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
Manu
16 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
muy bueno... me faltaría que mande que tenga un campo de suscripción y que envié una alerta cuando llega a cero vía mail... voy a ver si encuentro algo de eso para incluirlo en este codigo.. gracias!
Responder
juan carlos
18 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
muchas gracias boy estudiar tu codigo mil grcias
Responder

Comentar la versión: Versión 1

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

Versión 2

Publicado el 9 de Julio del 2020gráfica de visualizaciones de la versión: Versión 2
6.162 visualizaciones desde el 9 de Julio del 2020
http://lwp-l.com/s1430