Autor Tema: Contador Javascript de tiempo regresivo (Leído 21042 veces)

senseijulio · « : abril 11, 2007, 01:21:59 pm »

hay que cambiarle los textos y ponerle la fecha límite.

tiene un bug que se está corrigiendo: cuando llega a 0 segundos, vuelve a comenzar de un dia para abajo nuevamente pero está bajo correcciones. cuando lo tenga corregido lo posteo.

Código: [Seleccionar]

<SCRIPT LANGUAGE="JavaScript">
<!--
function getTime() {
now = new Date();
y2k = new Date("april 9 2007 12:31:00");
days = (y2k - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (y2k - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (y2k - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (y2k - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
sec = (secondsRound == 1) ? " second" : " seconds";
min = (minutesRound == 1) ? " minute" : " minutes, ";
hr = (hoursRound == 1) ? " hour" : " hours, ";
dy = (daysRound == 1) ? " day" : " days, "
document.timeForm.input1.value = "Faltan " + daysRound + dy + hoursRound + hr + minutesRound + min + secondsRound + sec + " para navidad!";
newtime = window.setTimeout("getTime();", 1000);
}
// -->
</script>
</head>
<form name=timeForm>
<input type="texte" name=input1 size=110 border-style="none" style="border-bottom: 0px solid; border-left: 0px solid;border-right: 0px solid;border-top: 0px solid;font:12px arial, helvetica,sans-serif">
</form>
<BODY onLoad="getTime()"></body>

realbo · « **Respuesta #1 :** abril 11, 2007, 01:32:30 pm »

no sera ke estas inventando la rueda de nuevo??

Código: [Seleccionar]

http://www.losrecursosgratis.com/javascript/seccionjava/tiempo.html

Citar

<script languaje="javascript">

//cambiar el texto
var before="el segundo aniversario de LosRecursosGratis.com"
var current="Hoy es mi cumpleaños!"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countdown(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var futurestring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1)
if (difference==0)
document.write(current)
else if (difference>0)
document.write("Faltan "+difference+" días para "+before)
}
//cambiar la fecha
countdown(2003,4,14)
</script>

mxgxw · « **Respuesta #2 :** abril 11, 2007, 01:42:47 pm »

Yo hice uno para la página de VIP Marketing. Lo único que está hecho en PHP, porque se sincronizaba con la hora del servidor y no de la computadora de cliente.

Eso tiene su ventaja porque de esa manera siempre te aseguras que te marque la hora correcta sin importar que el navegador del cliente tenga la hora correcta o tenga una ubicacion geografica direrente.

Lo único que hay que tener cuidado es de ajustar bien el offset entre la hora del servidor y la hora local que nos interesa.

El script calcula dias/horas/minutos/segundos/milisegundos restantes. Eso si... una vez llega al segundo 0, comienza a contar hacia adelante :P jejejej

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Javascript/PHP Countdown</title>
    <script type="text/javascript" src="scripts/prototype.js"></script>
    </head>
    <script type="text/javascript">
<!--
var currentTime = new Date(2006,<?php echo date("n,j,G,i,s",time()-(60*60*1)) // Hora local - offset del server ?>);
var targetTime = new Date(2006,2,24,23,59,59); // Fecha y hora destino de la cuenta regresiva
var diffTime = targetTime.getTime()-currentTime.getTime();

var days,hours,minutes,seconds;


function updateTimer() {
    diffTime-=1000;
    
    var countdownString = "[ Faltan: ";
    
    // Get days remaining
	// 1000*60*60*24 = 86400000
	days = Math.floor(diffTime/86400000);
	
	if(days>0) {
		countdownString += days+" d&iacute;a";
		if(days>1) {
			countdownString += "s";
		} 
		countdownString += " ";
	}

	// get hours remaining
	// 1000*60*60 = 3600000
	hours = Math.floor((diffTime-days*86400000)/3600000);
	
	if(!(days==0&&hours==0)) {
		countdownString += hours+" hora";
		if(hours>1||hours==0) {
			countdownString += "s";
		}
		countdownString += " ";
	}
	

	// get minutes remaining
	// 1000*60 = 60000
	minutes = Math.floor((diffTime-days*86400000-hours*3600000)/60000);
	
	
	if(!((days==0)&&(hours==0)&&(minutes==0))) {
		countdownString += minutes+" minuto";
		if(minutes>1||minutes==0) {
			countdownString += "s";
		}
		countdownString += " ";
	}

	// get seconds remaining
	// 1000
	seconds = Math.floor((diffTime-days*86400000-hours*3600000-minutes*60000)/1000);
	
	
	if((days==0)&&(hours==0)&&(minutes==0)) {
		countdownString += seconds+" segundo";
		if(seconds>1||seconds==0) {
			countdownString += "s";
		}
	}

	// get miliseconds remaining
	miliseconds = Math.floor(diffTime-days*86400000-hours*3600000-minutes*60000-seconds*1000);
	
	var timerDiv = document.getElementById("countdownDiv");
	
	timerDiv.innerHTML = countdownString+" ]";

	self.setTimeout("updateTimer()",1000);
}
//-->
</script>
<body>
<center>
     <span style="font-family: helvetica, arial sans-serif; font-weight: bold; font-size: 1em;color: rgb(150,150,150);">[ muy pronto ]</span>
     <br />
     <div style="font-family: helvetica, arial sans-serif; font-weight: bold; font-size: 1em;color: rgb(150,150,150);" id="countdownDiv">[ cargando ]</div>
<script type="text/javascript">
<!--
self.setTimeout("updateTimer()",1000);
//-->
</script>
</center>
</body>
</html>

Necesita de la biblioteca de javascript prototype:

http://www.prototypejs.org/

mxgxw · « **Respuesta #3 :** abril 11, 2007, 01:49:47 pm »

Cita de: ~ en abril 11, 2007, 01:43:23 pm

Yo creo que solo es de ponerle un IF para que cuando todo llegue a cero, o cuando se encuentre un valor negativo, simplemente despliege FELIZ NAVIDAD.

Eso veo que es todo lo que le falta...

Sip!! O puedes llamar a una funcion que refresque la pagina y muestre contenido nuevo. Yo no le agregue eso porque no me interesaba, ya que al llegar a cero iba a cambiar la página en el servidor. Lo único que me interesaba era que mostrara el contador regresivo basado en la hora de San Salvador, El Salvador. Así que ese poquito de código en PHP se encargaba de generar la hora actual del servidor y de ajustar el offset segun la zona horaria.

Aunque estuvieras en japón el script de cuenta regresiva tomaba como hora base El Salvador.

senseijulio · « **Respuesta #4 :** abril 11, 2007, 02:50:17 pm »

no he inventado la rueda nuevamente, es solo que lo encontre por ahi y lo quise compartir nada mas
pero si eso tiene algo de malo, pues diganlo.

mxgxw · « **Respuesta #5 :** abril 11, 2007, 03:09:59 pm »

Cita de: senseijulio en abril 11, 2007, 02:50:17 pm

no he inventado la rueda nuevamente, es solo que lo encontre por ahi y lo quise compartir nada mas
pero si eso tiene algo de malo, pues diganlo.

A veces es bueno reinventar la rueda jajaja sino mira este thread, tres implementaciones diferentes que hacen lo mismo

, pero ponerle, yo modifique la mía porque necesitaba que se ajustara a un timezone en particular, y ninguna de las que encontré en internet lo hacía utilizando fecha del servidor, sino siempre la del cliente... y tu sabes la regla de oro "Nunca confiaras en los datos enviados por el cliente"

senseijulio · « **Respuesta #6 :** abril 11, 2007, 03:17:27 pm »

eso digo yo, es una de las ventajas del código abierto

senseijulio · « **Respuesta #7 :** abril 11, 2007, 05:10:11 pm »

bueno aqui esta ya el script corregido

Código: [Seleccionar]


<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function getTime() {
now = new Date();
y2k = new Date("april 25 2007 23:15:00" );
days = (y2k - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (y2k - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (y2k - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (y2k - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
sec = (secondsRound == 1) ? " second" : " seconds";
min = (minutesRound == 1) ? " minute" : " minutes, ";
hr = (hoursRound == 1) ? " hour" : " hours, ";
dy = (daysRound == 1) ? " day" : " days, "
if (daysRound==0 && hoursRound==0 && minutesRound==0 && secondsRound==0)
document.write("cuenta finalizada" );
else {
document.timeForm.input1.value = "Faltan " + daysRound + dy + hoursRound + hr + minutesRound + min + secondsRound + sec + " para que se cumpla el evento";
newtime = window.setTimeout("getTime();", 1000);
}
}
// -->
</script>
</head>
<form name=timeForm>
<input type="texte" name=input1 size=110 border-style="none" style="border-bottom: 0px solid; border-left: 0px solid;border-right: 0px solid;border-top: 0px solid;font:12px arial, helvetica,sans-serif">
</form>
<BODY onLoad="getTime()"></body>

Sv Community El Salvador

Noticias:

Autor Tema: Contador Javascript de tiempo regresivo (Leído 21042 veces)

senseijulio

Contador Javascript de tiempo regresivo

realbo

Re: Contador Javascript de tiempo regresivo

mxgxw

Re: Contador Javascript de tiempo regresivo

mxgxw

Re: Contador Javascript de tiempo regresivo

senseijulio

Re: Contador Javascript de tiempo regresivo

mxgxw

Re: Contador Javascript de tiempo regresivo

senseijulio

Re: Contador Javascript de tiempo regresivo

senseijulio

Re: Contador Javascript de tiempo regresivo