Buscador
.

27 octubre 2011

Como poner una cuenta regresiva en mi web

Con este maravilloso truco podrás poner una cuenta regresiva dentro de tu sitio web o blog, 
Faltan solamente
Para Navidad

solo tienes que usar este código

<center><span class="Apple-style-span" style="color: red; font-family: 'Trebuchet MS', sans-serif;">
Faltan solamente</span></center><center><script language="JavaScript" type="text/javascript">
//<![CDATA[
TargetDate = "MM/DD/AA 09:10 PM";
BackColor = "white";
ForeColor = "black";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Días, %%H%% Horas, %%M%% Minutos, %%S%% Segundos.";
FinishMessage = "Feliz fin del mundo!!!";
//]]>
</script><script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js" type="text/javascript">
</script></center><center><span class="Apple-style-span" style="color: red; font-family: 'Trebuchet MS', sans-serif;">Para el fin del mundo</span></center>

Todos los parámetros son configurables: 
En lo que está en rojo es en donde tienes que poner la fecha y hora en la que quieres terminar la cuenta regresiva, lo que está en azul lo puedes cambiar por cualquier texto y lo que está en naranja es el mensaje que aparecerá al terminar la cuenta regresiva

114 comentarios:

  1. raschit: al contrario, a ti muchas gracias por tomarte la molestia de comentar :D

    ResponderEliminar
  2. Perrolisto: si, es muy bueno

    Ustenmoco: que es lo que no te funciona?

    ResponderEliminar
  3. Muchas Gracias !!! Me funcina pero si lo pongo con este formato: DDMMAAAA. Lo comento por si alguien no le funciona.
    Otra vez: MUCHAS GRACIAS !!!

    ResponderEliminar
    Respuestas
    1. excelente, gracias. Me imagino que todo depende de donde tengas tu página :)

      Eliminar
  4. Sirve para enviar por correo?

    ResponderEliminar
  5. Como puedo hacer para que al llegar a 0 (cero) redirija a otra pagina?

    ResponderEliminar
  6. Ojalá puedas ayudarme, requiero poner varios contadores para varios eventos en mi index, cómo puedo implementar este código ya que solo me muestra un contador por página???

    ResponderEliminar
  7. como inserto varios relojes en una misma pagina, necesito 4 cronometros regresivos en un solo docuemnto html, esta es la web www.menuguia.org GRACIAS!

    ResponderEliminar
    Respuestas
    1. Tienes que agregarlos uno por uno y por separado para que no haya conflicto pero luego los arrastras al mismo lugar.

      Eliminar
  8. Gracias!!! Muy chistoso lo del fin del mundo jeje

    ResponderEliminar
  9. Una Pregunta se pudiera cambiar el tamaño de la letra que esta en rojo???

    ResponderEliminar
    Respuestas
    1. Si, sólo tienes que agregar

      font-size: large

      después de

      sans-serif;

      Las dos veces que aparezca :)

      Eliminar
    2. Se puede poner mas grandes los números?

      Eliminar
  10. Todo un groso ... lo apliqué en mi página www.clubacostasud.com.ar/inicio

    ResponderEliminar
  11. no me queda!!!modifico todo y nada se me pone el titulo de la fecha del dia que elijo cuando no deberia

    ResponderEliminar
    Respuestas
    1. Que fecha quieres poner y la hora? Yo puedo configurartelo :)

      Eliminar
    2. lo pongo en un block de notas. lo guardo y lo abro en CHROME y me setea en faltan 3040 dias... una ayuda con eso?

      Eliminar
    3. Qué fecha le quieres poner? Dime y yo te lo configuro.

      Eliminar
  12. hola se puede utilizar en este codigo? para un sistema, que al momento que salga un personal de proceso por reposos me haga el conteo, pero por persona, sera que me funciona?

    ResponderEliminar
    Respuestas
    1. Si estamos hablando ya de sistemas es una cosa muy diferente y compleja por lo que este código no te serviría :(

      Eliminar
  13. Excelente aporte... Esta super chevere, gracias por tu aporte.... Ven un apregunta.

    El tamaño de la fecha, se puede agrandar ??

    ResponderEliminar
    Respuestas
    1. Si, sólo tienes que agregar

      font-size: large

      después de

      sans-serif;

      Las dos veces que aparezca :)

      Eliminar
  14. se puede cambiar el tamaño del reloj ?? osea.... yo quiero que no salgan los numeros tan chiquitos los quiero mas grandes como ago ???

    ResponderEliminar
    Respuestas
    1. Me temo que no puesto que habría que modificar el script

      Eliminar
    2. Quizás un poco tarde y ya lo hayan resuelto, pero esta fue mi solución:
      En la línea DisplayFormat coloca las etiquetas de título o de encabezados (h1, h2, h3: según tamaño que desees, h1 es el más grande) dentro de las comillas, dicha linea queda así:
      DisplayFormat = "ETIQUETA DE APERTURA%%D%% Días, %%H%% Horas, %%M%%Minutos, %%S%% Segundos.ETIQUETA DE CIERRE";

      Listo!!!

      Eliminar
  15. hola, buenas tardes... esta cuenta regresiva, sirve para facebook? siendo que si, donde es que se pone el codigo? muchas gracias!!! :D

    ResponderEliminar
    Respuestas
    1. Si usas una aplicación para HTML si podría funcionar para una página

      Eliminar
  16. Respuestas
    1. Al contrario, muchas gracias a ti por tomarte la molestia de comentar :)

      Eliminar
  17. He probado y poniendo la fecha que deseo, que son hoy 29 días, siempre me aparece en la vista previa "3092" días xx horas xx minutos.
    Es posible que esté haciendo algo mal.
    ¿Qué debería corregir,?

    ResponderEliminar
    Respuestas
    1. Tendrías que cambiar

      MM/DD/AA

      por

      08/04/2012

      Si la cuenta regresiva las quieres poner para que se termine el cuatro de agosto.

      Eliminar
  18. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  19. Tengo una página de un grupo cristiano con mas de 4000 miembros en la que cada dia a las 8 pm es la hora de la oración. Me gustaría poner este excelente código en la que muestra cuanto tiempo falta para el momento de orar. Esto es diario, asi que me podrían decir si el script se podria configurar para este caso. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola que tal, lo tendría que configurar todos los días. No hay manera de ponerlo para que se reinicie, lo siento.

      Eliminar
  20. Hola, sabes que quiero colocarlo para una transmisión en vivo. Pero no puedo, solo dice solo faltan y abajo para transmitir en vivo, pero nada de cuento falta. Ayuda por favor.

    ResponderEliminar
    Respuestas
    1. Si quieres, puedes darme la hora y fecha que quieres configurar y yo lo hago por ti.

      Eliminar
  21. Me pueden configurar Días: 7 Hora: 2:30 Minuto:50 Segundo: 10

    ResponderEliminar
  22. Buenas tardes,

    Me funciona bien, pero quiero cuadrarlo con un reloj de puja y tengo una diferencia de 3 horas como se cambian las horas y los minutos.

    felicidades por todo

    ResponderEliminar
  23. hola a mi no me va me sale: NaN dias NaN horas etc

    lo puesto de todos los modos posibles la hora, msn mangarde@hotmail.es saludos y muchas gracias por adelantado :D

    ResponderEliminar
  24. hola puse el codigo todo bien cuando lo abro con el chrome pero con el explorer y mozilla f..... me sale directo el mensaje y no la cuenta regrsiva

    ResponderEliminar
    Respuestas
    1. A mi me pasa lo mismo.
      En mi caso en chrome me sale bien, pero en explorer me pone "Faltan - Ya es Semana Santa - para Semana Santa" :S
      me salta directamente el mensaje. Espero puedan ayudarme. Gracias!

      Eliminar
  25. oyes men se cuando se termina el time de seg no se cambia a minuto 30
    POR EJEMPLO LO TENGO A :

    20 MIN 30 SEG LLEGA A 0 EL DE SEG Y DA OTRABES A 20 MIN 30 SEG.NO ME CAMBIA A 19 MIN 59 SEG
    ¿QUE AGO?

    ResponderEliminar
  26. Gracias por tan excelente aporte

    ResponderEliminar
  27. Sencillo y muy util... Muchas GRACIAS.

    ResponderEliminar
  28. Puedo ponerle link al texto que aparece en finishmessage?

    ResponderEliminar
  29. Donde tengo que aplicar este mensaje???
    Lo quiero para FACEBOOK

    ResponderEliminar
  30. Hola buen dia, una pregunta quiero poner un cronometro de cuenta regresiva en mi perfil de Facebook, este codigo sirve?

    ResponderEliminar
  31. hola esta configurado a la fecha actual? porque cuando pongo la fecha de término me dice que faltan 776 dias, y es la fecha del 28 de febrero, como puedo arreglar esto?. Supongamos que cada inicio de mes quiero una cuenta para el ultimo dia del mes??
    Gracias

    ResponderEliminar
  32. Hola muy buena pagina! Tengo un problema: No se me cambia lo del fin del mundo, lo quiero cambiar por feliz año nuevo y no pasa nada. Me pueden ayudar?

    ResponderEliminar
  33. como puedo poner el cronometro en un grupo de facebook?

    ResponderEliminar
  34. Buenicimo este truco ,lo comencé a usar gracias. beanlo en http://www.mcc-cucuta.com/

    ResponderEliminar
  35. Grande, gracias por el aporte. Solo que busco como poner algo similar en Facebook

    ResponderEliminar
  36. ¿como puedo hacerlo para ponerlo en mi facebbok?

    ResponderEliminar
  37. Buenas amigo... una pregunta ese codigo se podria pegar en el facebook para que aparexca el contador en un grupo? de ser si.. como se colocaría?.. es que a partir de hoy nos queda un mes exacto para mi acto de grado.. y quisiera tener un contador regresivo en el grupo de mi promoción.. Gracias por toda la ayuda que puedas darme

    ResponderEliminar
  38. Me funcionó super bien!!! jajaj me encanta, muchísimas gracias!! :D

    ResponderEliminar
  39. y como muevo el reloj a donde quiero, los mensaje todo bien pero el reloj? o sea posicion tamaño

    ResponderEliminar
  40. hola nesecito ayuda ... anda todo prfecto pero tengo otros usuarios de otros paises que yo pongo la cuenta regresiva en 10 mi nutos y a ellos les aparecen que falta como 7 horas obeamente esto es por el cambio horario hay alguna forma para evitar que sea afectado con el cambio horario osea yo quiero que la ceunta sea de 60 minutos sin importar el pais que la este mirando simplemente quiero que retroceda el tiempo hasta llegar a 0 hay algun codigo que no se maneje con el sistema de horarios ya q esto traeria problemas en diferentes paises por favor ayuda

    ResponderEliminar
  41. No me funciona, como hago para agregarlo a una pagina de Jimdo? quiero que acabe en año nuevo

    ResponderEliminar
    Respuestas
    1. Lo que no sale es la cuenta regresiva, lo hago por HTML de jimdo en donde dice widgets/HTML

      Eliminar
    2. Fue mi erro tenia que verlo en vista previa,
      Ahora si puedo decir que es una muy buena pagina y me ayudara mucho
      Muchas Gracias!

      Eliminar
  42. gracias me sirvio para el conteo de mi pagina, los espero por alli

    ResponderEliminar
  43. ¿como puedo hacerlo para ponerlo en mi facebbok

    ResponderEliminar
  44. NO LE ENTIENDDDDDO SOLO COPIO Y PEGO EL CODDIGO LO QUIERO PARA MI MURO DDE FACEBOOK OK HELP ME

    ResponderEliminar
    Respuestas
    1. Lo siento, el muro de Facebook no interpreta lenguaje HTML, es imposible ponerlo ahí

      Eliminar
  45. disculpas - una ayuda !! el el codigo o letras para aumentar el tamaño daria para cualquier cosa o aplicacion!!

    ResponderEliminar
  46. Excelente, muchas gracias por tu aporte. Dios te bendiga.

    ResponderEliminar
  47. Hola amigo, lo puse pero me marca un error de scrip y no se si se deba a algo en mi homepage.

    ResponderEliminar
  48. Hola, me pone NaN dias etc, que puede estar pasando?

    ResponderEliminar
    Respuestas
    1. Hay que cambiar la fecha límite en la siguiente parte:

      TargetDate = "MM/DD/AA 09:10 PM";

      Si es para Navidad debes poner:
      TargetDate = "24/12/2013 11:59 PM";

      Si es para Ano Nuevo debes poner:
      TargetDate = "29/12/2013 11:59 PM";

      Etc...

      Eliminar
  49. Como puedo hacer para que al final del conteo muestre una imagen ????

    ResponderEliminar
  50. Como podría colocarlo de manera simple (es decir que solo se visualice el contador en mi muro de facebook)

    ResponderEliminar
  51. ¿o en mi fan page de Facebook, o en un evento creado y anunciado en Facebook por ejemplo?

    ResponderEliminar
  52. ¿Como puedo tener varios en un solo html? lo que hace, aunque ingreso por separado, es sumar los días de todos y eso me sale. pero no varios.

    ResponderEliminar
  53. NO lo puedo hacer! cómo se hace?

    ResponderEliminar
  54. Excelente !!! pero tengo una duda ¿Con que etiqueta puedo aumentar el porte de los números? Saludos ! excelente material !

    ResponderEliminar
  55. Hola buenas noches tengo una duda como podria hacer para que se muestra en un while y asi pongo varios countdowns? Es que lo he probado y solo me hace el countdown del ultimo.

    Gracias y Un Cordial Saludo

    ResponderEliminar
  56. Muchas gracias, me sirvio mucho tu publicación

    ResponderEliminar
  57. Hola, he conseguir colocar el codigo, pero mi fecha final es el 29 de Marzo y lo he colocado pero me salen que quedan 2309 dias y no consigo colocarlo bien, me gustaria que me ayudaras gracias

    ResponderEliminar
  58. Alguien sabe porque este código no funciona en explorer ni mozilla?, en chrome está perfecto.

    ResponderEliminar
  59. Me respondo solo xD, para que funcione en Explorer y Mozilla
    en la parte del target day, el año debe ir con 4 dígitos.

    Debe ser TargetDate = "02/08/2015 10:00 AM"; en vez de TargetDate = "02/08/15 10:00 AM";

    ResponderEliminar
  60. Hola buen dia, me podrias ayudar con un contador de tiempo para ponerlo en mi pagina, el proyecto es un examen en linea pero no me acepta el codigo expuesto arriba :(

    ResponderEliminar
  61. Como puedes modificar el tamaño del formato de los numeros del conteo es decir que se vean más grandes o más pequeños

    ResponderEliminar
  62. Como puedes modificar el tamaño del formato de los numeros del conteo es decir que se vean más grandes o más pequeños

    ResponderEliminar
    Respuestas
    1. Sencillo, en la línea DisplayFormat coloca las etiquetas de título o de encabezados (h1, h2, h3: según tamaño que desees, h1 es el más grande) dentro de las comillas, dicha linea queda así:
      DisplayFormat = "ETIQUETA DE APERTURA%%D%% Días, %%H%% Horas, %%M%%Minutos, %%S%% Segundos.ETIQUETA DE CIERRE";

      Listo!!!

      Eliminar
  63. Muchas Gracias, proyectoveinte.com $1 dolar por 99 píxel.

    ResponderEliminar
  64. Muchas gracias por este código, pero tengo una duda cual sería el codigo para que cuando termine la cuenta regresiva se eliminen los spans como por ejemplo: Faltan solamente. Quisiera saber si me podrías ayudar

    ResponderEliminar
  65. No funciona ni cambiando el targetdate

    ResponderEliminar
  66. Funciona perfecto, gracias erpal.cl

    ResponderEliminar
  67. BUENAS TARDES EN UNA PAGINA DE FACEBOOK SE PUEDE PONER?

    ResponderEliminar
  68. Se puede poner una cuenta regresiva en una publicacion de fanpage de facebook???

    ResponderEliminar
  69. HOLA BUENAS NOCHES
    SE QUE SI PONGO EL CODIGO Y PONGO LA FECHA DE MANERA MANUAL
    HAY MANERA DE QUE SE PUEDE HACER AUTOMATICAMENTE POR MEDIO DE CALCULO DE KILOMETRAJES
    COMO POR EJEMPLO SI UN AUTOMOVIL VA A CONDUCIR 100 KILOMETROS Y LUGO QUE EMPIEZE UNA CUENTA REGRESIVA
    DE CUANTO TIEMPO VA A TARDAR EN RECORRER LOS 100 KILOMETROS

    ResponderEliminar
  70. a mi no me funciona solamente me salen las letras, lo copie tal cual poniendo la fecha del domingo a las 12h y solo me salen las letras, probe lo que dija un usuario de ponerlo en formato españil dia mes y año pero tampoco solo salen las letras.
    Puedes darme un poco de luz porfa. Gracias

    ResponderEliminar