CountDown una clase en Javascript

Lunes, 13 de octubre 2008

En el post 3D Countdown with FIVe3D (ver también cómo lo hice: Escribe una cuenta atrás en Flash), se le dio una clase para crear un objeto de cuenta atrás en Actionscript, aquí es una versión similar en Javascript:

JavaScript:
  1. / **
  2. * Clase CountDown
  3. *
  4. * @ Author Giovambattista Fazioli
  5. * @ Undolog.com Email@g.fazioli
  6. * @ Http://www.undolog.com Web
  7. *
  8. Años dd * @ param (string) "el día de mes,"
  9. *
  10. * /
  11. dd ) { la función de cuenta atrás (dd) (
  12. / / Tiempo objetivo Inicial
  13. new Date ( dd ) ; var target = new Date (dd);
  14. = target. getTime ( ) ; esto. targetTime = objetivo. getTime ();
  15. / **
  16. * Actualizar la cuenta regresiva
  17. * /
  18. = function ( ) { esto. refresco = function () (
  19. new Date ( ) ; var hoy = new Date ();
  20. today. getTime ( ) ; currentTime var = día de hoy. getTime ();
  21. / / Tiempo restante
  22. ( this . targetTime - currentTime ) ; esto. _leftMilliseconds = (this. targetTime - currentTime);
  23. Math. floor ( this ._leftMilliseconds / 1000 ) ; esto. _leftSeconds = Math. piso (this. _leftMilliseconds / 1000);
  24. Math. floor ( this ._leftSeconds / 60 ) ; esto. _leftMinutes = Math. piso (this. _leftSeconds / 60);
  25. Math. floor ( this ._leftMinutes / 60 ) ; esto. _leftHours = Math. piso (this. _leftMinutes / 60);
  26. / / No módulo
  27. = Math. floor ( this ._leftHours / 24 ) ; esto. leftDays = Math. piso (this. _leftHours / 24);
  28. / / Para imprimir
  29. = this ._leftMilliseconds % 1000 ; esto. leftMilliseconds = esto. _leftMilliseconds% 1000;
  30. = this ._leftSeconds % 60 ; esto. leftSeconds = esto. _leftSeconds% 60;
  31. = this ._leftMinutes % 60 ; esto. leftMinutes = esto. _leftMinutes% 60;
  32. = this ._leftHours % 24 ; esto. leftHours = esto. _leftHours% 24;
  33. )
  34. ( ) ; esto. refresh ();
  35. )

Ejemplo

JavaScript:
  1. new countDown ( '1 1, 2009' ) ; var cd = nueva cuenta regresiva ('1 1, 2009 ');
  2. / / Mostrar cuántos días, horas, minutos, segundos y milésimas de segundo a enero de 2009
  3. cd. leftDays + "," + cd. leftHours + "," + cd. leftMinutes + "," + cd. leftSeconds + "," + cd. leftMilliseconds ) ; documento. escribir (ed. leftDays + "" + cd. leftHours + "" + cd. leftMinutes + "" + cd. leftSeconds + "" + cd. leftMilliseconds);

Post relacionados

Fue útil esta información?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Cargando ...

5 comentarios a "una cuenta atrás de clases en Javascript"

  1. getAvatar 1,0
    14 de octubre 2008 Richard Digno:

    Hola Giovambattista,
    Me parece muy interesante esta solución JavaScript, porque es simple. Como amante de las secuencias de comandos, he hecho algunos cambios en su código que se coloca el siguiente:

    JavaScript:
    1. dd ) { la función de cuenta atrás (dd) (
    2. / / Tiempo objetivo Inicial
    3. new Date ( dd ) ; var target = new Date (dd);
    4. = target. getTime ( ) ; esto. targetTime = objetivo. getTime ();
    5. / **
    6. * Actualizar la cuenta regresiva
    7. * /
    8. = function ( ) { esto. refresco = function () (
    9. new Date ( ) ; var hoy = new Date ();
    10. today. getTime ( ) ; currentTime var = día de hoy. getTime ();
    11. / / Tiempo restante
    12. = this . targetTime - currentTime ; esto. leftMilliseconds = esto. targetTime - currentTime;
    13. = Math. floor ( this . leftMilliseconds / 1000 ) ; esto. leftSeconds = Math. piso (this. leftMilliseconds / 1000);
    14. = Math. floor ( this . leftSeconds / 60 ) ; esto. leftMinutes = Math. piso (this. leftSeconds / 60);
    15. = Math. floor ( this . leftMinutes / 60 ) ; esto. leftHours = Math. piso (this. leftMinutes / 60);
    16. = Math. floor ( this . leftHours / 24 ) ; esto. leftDays = Math. piso (this. leftHours / 24);
    17. ( ) ; esto. render ();
    18. );
    19. = function ( ) { esto. render = function () (
    20. = this . ms = this . leftMilliseconds % 1000 ; esto. leftMilliseconds = esto. ms = esto. leftMilliseconds% 1000;
    21. = this . s = this . leftSeconds % 60 ; esto. leftSeconds = esto. s = Este%. leftSeconds 60;
    22. = this . m = this . leftMinutes % 60 ; esto. leftMinutes = esto. m = Este%. leftMinutes 60;
    23. = this . h = this . leftHours % 24 ; esto. leftHours = esto. h = Este%. leftHours 24;
    24. = this . leftDays ; esto. d = esto. leftDays;
    25. );
    26. = function ( _format ) { esto. salida = function (_format) (
    27. _format. split ( ' ' ) || 'dhms ms' , output = '' ; formato var = _format. split ('') | | 'dhms ms', salida ='';
    28. / / Alert (FN), comentado por = = Deshacer : D
    29. var t in format ) { for (var t en formato) (
    30. this [ format [ t ] ] ) output += this [ format [ t ] ] + ( ( t != format. length - 1 ) ? ', ' : '' ) ; if (this [formato [t]]) salida + = this [formato [t]] + ((t! = formato. longitud - 1)?',':'');
    31. )
    32. output ) ; documento. escribir (salida);
    33. );
    34. ( ) ; esto. refresh ();
    35. )

    Básicamente, la adición de más estructura y representada por el método de salida, que le permite imprimir la cuenta regresiva con el formato deseado por el usuario (de manera muy similar, como sucede en PHP).
    Por ejemplo, si desea imprimir la fecha, horas, minutos, segundos y milésimas de segundo que faltan a través de nuestra cuenta regresiva, que podría proceder de la siguiente manera, cada vez con ningún recurso para apelar las propiedades internas de nuestra clase:

    JavaScript:
    1. new countDown ( '1 1, 2009' ) ; var cd = nueva cuenta regresiva ('1 1, 2009 ');
    2. 'dhms ms' ) ; cd. salida ( 'ms dhms');

    El método de "hacer" por fin se ocupa de la "normalizar" el formato de los números.

    Otra adición interesante sería un método "start", que pide la salida periódicamente, por lo que parece una cuenta atrás real (de cuenta regresiva que puede ser detenida por su método de "stop").

    Richard Digno

  2. getAvatar 1,0
    14 de octubre 2008 Giovambattista Fazioli:

    @ Richard Digno: en realidad una variante de Niza, bravo! Especialmente interesante técnica para dar formato a la salida: ingeniosa y sutil! En la output() método output() pondría un límite a la return(output) en lugar de un document.write() ... pero es un detalle. Un temporizador con start() y stop() hacen que sea realmente completa. Felicidades y gracias por las interesantes sugerencias :)

  3. getAvatar 1,0
    15 de octubre 2008 Richard Digno:

    @ Giovambattista Fazioli:

    En la output() método output() pondría un límite a la return(output) en lugar de un document.write()

    Por cierto, entré en el document.write() para una notificación inmediata de la prueba, en la versión final de producción y un return es una necesidad ;)

    Felicidades y gracias por las interesantes sugerencias :)

    Cualquier cosa, me complace que el intercambio de asesoramiento técnico :)

    Pronto,
    Richard Digno

  4. getAvatar 1,0
    20 de noviembre 2008 Giovambattista Fazioli:

    Actualización: Microsoft Internet Explorer 7, la fecha en formato numérico, escriba "3 5, 2008" produce el error. Para eliminar sólo entrar en el "mes" con 3 cartas en Inglés: Jan, Feb, Mar, etc ...

  5. getAvatar 1,0
    05 Ott, 2009 Pablo:

    @ Giovambattista Fazioli:

    Hola a todos.
    He encontrado este script muy interesante.
    Mi único problema? Ser un idiota con javascript es difícil insertar en una página web.
    El cambio que he hecho que el código ha sido objeto de "retorno" en lugar de document.write, pero no puedo recordar a continuación, la página de identificación no entender lo que yo uso.
    ¿Puede ayudarme?
    gracias
    hola

Deja tu comentario

TAG XHTML RESTRICCIONES: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> código de inserción:
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL