Contador regresivo

[zazoo]

Ando buscando algún código, para un contador regresivo, para poder ingresarlo en mi página Web, lo que sucede que los que he encontrado no han sido de mi agrado, por eso acudo por este medio, para recibir ayuda.

Ando buscando un contador regresivo que contenga "milisegundos".
Días / Horas / minutos / segundos / milisegudos

me he encontrado un codigo exelente, pero al momento de modificarlo me genera un error, no lo he podido configurar bien.

Ante ello le pido de su ayuda?


http://www.kostenlose-javascripts.de/javascripts/zaehler-counter-timer/countdown-bis-silvester.html (por motivos de seguridad del sitio lamento no poner el link directamente)
esta es la pagina original del código


esta dividido en dos archivos

Código:

<script type='text/javascript'>
<!--
var now = new Date();
var year = now.getYear();
if (year < 1900) {
	year += 1900;
}
var end = new Date("December 31, " + year + " 6:00:00 GMT");

document.write('<div style="text-align: center">');
document.write('	<span id="c1" style="FONT: bold 30px arial; COLOR: green"></span><br />');
document.write('	<span id="c2" style="font: bold 25px arial; color: blue">;</span><br />');
document.write('	... falta para el 31 de Diciembre ' + year);
document.write('</div>');

function toSt2(n) {
  s = "";
  if (n < 10) s += "0";
  return (s + n).toString();
}
function toSt3(n) {
  s = "";
  if (n < 10) s += "00";
  else if (n < 100) s += "0";
  return (s + n).toString();
}
function countdown() {
  d = new Date();
  count = Math.floor(end.getTime() - d.getTime());
  if(count > 0) {
    miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
    seconds = toSt2(count%60); count = Math.floor(count/60);
    minutes = toSt2(count%60); count = Math.floor(count/60);
    hours = toSt2(count%24); count = Math.floor(count/24);
    days = count;
    document.getElementById('c1').innerHTML = days + ' D&Iacute;AS';
    document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds + '.' + miliseconds + '';
    setTimeout("countdown()", 30);
  }
}
//-->
</script>
<br />
<div id="grafitojavascripts" align="center"><a href="http://www.kostenlose-javascripts.de/blog/36-staroffice-kostenlos" title="Grafito - Diseño Web" target="_blank">www.grafitocr.com</a></div>
<p><br />

  <script type="text/javascript" src="http://www.grafitocr.com/pag_v2/startScript.html"></script>

archivo externo

Código:

var cDiv = document.getElementById("grafitojavascripts");
var cD1 = (cDiv.innerText) ? cDiv.innerText : cDiv.textContent;
var cD2 = cDiv.innerHTML;

if ((cD1.length > 5) && ((cD2.match(/tenlo|[phf]oto|kaps|pe\.de|erg\.org|nus\.info|selbay|k\.eu|ris\.de|els\.de/gi))) && !(cD2.match(/1pt|1px|#|!|2page|wg\.am|hallo/))) {
	window.onload=countdown;} else {
    document.write("<a href='http://www.grafitocr.com/'><h3>El contador regradivo no funciona correctamente<br>Puedes visitar - grafito</h3></a>");
}

Prueba personal (no completo)---> http://www.grafitocr.com/pag_v2/count_practice.html
Prueba con el error ---> http://www.grafitocr.com/pag_v2/count_practice_try.html

agradecere si me prestan un poco de su sabiduría !

[zazoo]

agradecere cualquier ayuda !

[zazoo]

llevo varios días esperando una respuesta.... agradecerpe cualquier ayuda..

Feliz Navidad !

[derkenuke]

Hola zazoo:

No sé si has cogido la filosofía de los códigos que has copiado: Básicamente para hallar la diferencia de dos fechas se hace fecha1.getTime() - fecha2.getTime(), y lo que obtienes son los milisegundos de diferencia.

Luego se trata de hacer operaciones matemáticas para convertir esa cantidad en segundos, horas, días, meses y años... es bastante sencillo.

Código PHP:

  var f1 = new Date(2008, 12, 25, 10, 50, 23);        // 2008/12/25 10:50:23 
f1.setMilliseconds(562); 
var f2 = new Date(2007, 12, 24, 09, 45, 13);        // 2007/12/24 09:45:13 
f2.setMilliseconds(122); 
 
f1 = f1.getTime(); 
f2 = f2.getTime(); 
 
document.write("Diferencia en milisegundos: "+(f1-f2)+" ms.<br/>"); 
document.write("Diferencia en dias: "+((f1-f2)/1000/60/60/24)+" días.<br/>"); 
var diasExactos = ((f1-f2)/1000/60/60/24).toFixed(0); 
var horasRestantes = ((f1-f2)/1000/60/60) - diasExactos*24; 
document.write("Diferencia en días y en horas: "+diasExactos+" días exactos más "+horasRestantes.toFixed(4)+" horas.<br/>");  
   

Se trata de descomponerlos mediante la división, y coger las partes enteras. Seguiremos desarrollando los decimales.
El proceso es éste:
Intentamos conseguir años enteros -pasar de milisegundos a años- ( X/1000/60/60/24/365 ).
Cogemos la parte decimal de esos años (p), y conseguimos los meses: p*12
Cogemos la parte decimal de esos meses (q), y conseguimos los dias: q*30
Cogemos la parte decimal de esos dias (d), y conseguimos las horas: d*24
Cogemos la parte decimal de esas horas (h), y conseguimos los minutos: h*60
Cogemos la parte decimal de esos minutos (m), y conseguimos los segundos: m*60
Y por último cogemos la parte decimal de esos segundos (s) y conseguimos los milisegundos: s*1000


Bueno, no sé si me he acabo explicando bien o peor todavía....


Espero que lo hayas entendido y te puedas construir algo. No sé si habrá algo de ésto por las FAQ, casi seguro que sí


Un saludo

[zazoo]

gracias por tu respuesta, aun así sigo teniendo problemas con el contador regresivo,
he logrado pequeños avances.

[derkenuke]

Hola de nuevo:

Si no pones dudas concretas, dudo que alguien siga el post con mucho interés. Deberías simplificar el código dejándolo en sólo lo necesario y publicar dudas concretas de por qué no funciona como esperas.


Un saludo.

[wolfdvs]

Espero que no sea demasiado tarde para mostrate un ejempo de un contador regresivo que hice basandome en un post de una diferencia de fechas en javascript.

bueno no he analizado mucho tu codigo javascript, espero que sirva de referencia para algun otro internauta, he usado una etiqueta php para pasar el valor de la fecha de mi servidor al codigo javascript.

codigo javascript:

Código:

<script type="text/javascript">
	var month = 5;  //mes del evento 0:enero, 1:febrero, ...
	var day = 11; //dia del evento
	var year = 2010; //año del evento
	var one_day = 1000*60*60*24; //tiempo en milisegundos de duracion de un dia
	var one_hour= 1000*60*60; //tiempo en milisegundos de duracion de una hora
	var one_min = 1000*60; //tiempo en milisegundos de duracion de un minuto 
	var one_seg = 1000; //tiempo de duracion de 1 segundo
	var aux; //variable que me permite almacenar datos temporales
	var evento = new Date(year,month,day); //dia del evento
	var begin = true; //variable para verificar si ya inicio el evento
	
	function count_regressive() {
		
		var today = new Date(<?php time() ?>);  //colocamos la hora del servidor
		
		if(today.getMonth()==month && today.getDay()>day) //verificamos si el evento todavia no ocurre
		begin = true;
	
		aux = (evento.getTime()-today.getTime()); //obtenemos los milisegundos 
		
		var days = Math.ceil(aux/one_day); //dias que faltan
		
		aux = (aux%one_day); //residuo 
		
		var hours = Math.ceil(aux/one_hour); //horas que faltan
		
		aux = aux%one_hour; //residuo
		
		var mins = Math.ceil(aux/one_min); //minutos que faltan
		
		aux = aux%one_min; //residuo
		
		var segs = Math.ceil(aux/one_seg); //segundos
		
	
		
		document.getElementById('show').innerHTML = days + ' Dias ' + hours + ' horas ' + mins + ' Minutos  ' + segs + ' Segundos ' ;
		
		setTimeout("count_regressive()",1000); //para mostrar el contador regresivo
	}
																  
</script>

ponemos en el body del archivo html

Código:

<body onload="count_regressive()">
<h1 id="show">
</h1>
</body>

Nos estamos viendo...