Una cuenta atrás de la clase en Javascript

En el mensaje con el 3D cuenta atrás FIVe3D (ver también cómo lo hice: escribir una cuenta atrás a Flash ), se propuso crear un objeto de clase en Actionscript cuenta atrás, aquí está una versión similar en JavaScript:

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
/ **
* Clase de cuenta atrás
*
* @ Autor Giovambattista Fazioli
* @ @ Email g.fazioli undolog.com
* @ Web http://www.undolog.com
*
* @ Param dd (cadena) "día, mes, año
*
* /
dd ) { función de cuenta atrás (dd) {
/ / Inicializa plazo previsto
new Date ( dd ) ; var target = new Date (dd);
= target. getTime ( ) ; .. este objetivo targetTime = getTime ();

/ **
* Actualizar la cuenta regresiva
* /
= function ( ) { este. refresh = function () {
new Date ( ) ; var hoy = new Date ();
today. getTime ( ) ; var hoy = horaActual getTime ().;
/ / Tiempo restante
( this . targetTime - currentTime ) ; este _leftMilliseconds = (this. targetTime - Tiempoactual).;
Math. floor ( this ._leftMilliseconds / 1000 ) ; .. esta _leftSeconds = Matemáticas piso (_leftMilliseconds this. / 1000);
Math. floor ( this ._leftSeconds / 60 ) ; esta planta _leftMinutes Matemáticas = (_leftSeconds this. / 60)..;
Math. floor ( this ._leftMinutes / 60 ) ; .. esta _leftHours = Matemáticas piso (this. _leftMinutes / 60);
/ / No módulo
= Math. floor ( this ._leftHours / 24 ) ; .. esta leftDays = Matemáticas piso (_leftHours this. / 24);
/ / Para imprimir
= this ._leftMilliseconds % 1000 ; este leftMilliseconds = esta _leftMilliseconds% de 1000..;
= this ._leftSeconds % 60 ; este leftSeconds = esta _leftSeconds 60%..;
= this ._leftMinutes % 60 ; este leftMinutes = esta _leftMinutes 60%..;
= this ._leftHours % 24 ; .. esta leftHours = esta _leftHours 24%;
}
( ) ; este refresh ().;
}

Ejemplo

1
2
3
new countDown ( '1 1, 2009' ) ; var = new cd cuenta atrás (1 '1, 2009);
/ / Muestra cuántos días, horas, minutos, segundos y milisegundos a 01 de enero 2009

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

  1. 14 de octubre 2008 Richard Vale la pena :

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

    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
    dd ) { función de cuenta atrás (dd) {
    / / Inicializa plazo previsto
    new Date ( dd ) ; var target = new Date (dd);
    = target. getTime ( ) ; .. este objetivo targetTime = getTime ();

    / **
    * Actualizar la cuenta regresiva
    * /
    = function ( ) { este. refresh = function () {
    new Date ( ) ; var hoy = new Date ();
    today. getTime ( ) ; var hoy = horaActual getTime ().;
    / / Tiempo restante
    = this . targetTime - currentTime ; . leftMilliseconds este = esta targetTime - horaActual.;
    = Math. floor ( this . leftMilliseconds / 1000 ) ; .. esta leftSeconds = Matemáticas piso (leftMilliseconds this. / 1000);
    = Math. floor ( this . leftSeconds / 60 ) ; esta planta leftMinutes Matemáticas = (leftSeconds this. / 60)..;
    = Math. floor ( this . leftMinutes / 60 ) ; .. esta leftHours = Matemáticas piso (this. leftMinutes / 60);
    = Math. floor ( this . leftHours / 24 ) ; .. esta leftDays = Matemáticas piso (leftHours this. / 24);
    ( ) ; este render ().;
    };

    = function ( ) { este render. = function () {
    = this . ms = this . leftMilliseconds % 1000 ; este leftMilliseconds = esta = ms este leftMilliseconds% de 1000...;
    = this . s = this . leftSeconds % 60 ; este leftSeconds = este s = esta leftSeconds 60%...;
    = this . m = this . leftMinutes % 60 ; este leftMinutes = m = esta esta leftMinutes 60%...;
    = this . h = this . leftHours % 24 ; este leftHours = h = esta esta leftHours 24%...;
    = this . leftDays ; este d = esta leftDays..;
    };

    = function ( _format ) { este. de salida = function (_format) {
    _format. split ( ' ' ) || 'dhms ms' , output = '' ; var format = _format split ('') | | 'DHMS ms, salida =''.;
    / / Alert (fn), comentado por deshacer = =: D
    var t in format ) { for (var formato t) {
    this [ format [ t ] ] ) output += this [ format [ t ] ] + ( ( t != format. length - 1 ) ? ', ' : '' ) ; si (esto [el formato [t]]) salida + = esto [el formato [t]] + ((t! = formato de longitud -.? 1)',':'');
    }
    output ) ; documento de escritura (salida).;
    };

    ( ) ; este refresh ().;
    }

    En esencia, la adición de más cuerpo está representado por el método de salida, que le permite imprimir la cuenta atrás con el formato deseado por el usuario (de manera muy similar a lo que sucede en PHP).
    Por ejemplo, si desea imprimir el día, hora, minutos, segundos y milisegundos que falta a través de nuestra cuenta regresiva, que podría proceder de la siguiente manera, cada vez, sin recurrir a la llamada de las propiedades internas de nuestra clase:

    1
    2
    new countDown ( '1 1, 2009' ) ; var = new cd cuenta atrás (1 '1, 2009);
    'dhms ms' ) ; . cd de salida ('DHMS ms');

    El método "render" también se ocupa de los "normalizar" el formato de los números.

    Otra adición interesante podría ser una manera de "start", que invoca la salida periódica para parecerse a una cuenta atrás real (cuenta regresiva que puede ser detenida por el método respectivo "stop").

    Richard Vale la pena

    Responder Citar
  2. 14 de octubre 2008 Giovambattista Fazioli :

    @ Richard Worth: una versión muy bien, bravo! Especialmente interesante técnica para formatear la salida: ingenioso y sutil! più che un document.write() … ma è un dettaglio. En el método de output() pondría un límite a la return(output) más que un document.write() ... pero es un detalle. , renderebbe il tutto davvero completo. Un contador de tiempo con start() y stop() , hacen que sea muy completa. Felicidades y gracias por las sugerencias de interés :)

    Responder Citar
  3. 15 de octubre 2008 Richard Vale la pena :

    @ Giovambattista Fazioli:

    più che un document.write() En el método de output() pondría un límite a la return(output) más que un document.write()

    è d'obbligo Por supuesto, puse el document.write() para la notificación inmediata de las pruebas, la versión de producción final de un return es obligatorio ;)

    Felicidades y gracias por las sugerencias de interés :)

    De nada, me dio gusto que el intercambio de asesoramiento técnico :)

    Hasta pronto,
    Richard Vale la pena

    Responder Citar
  4. 20 de noviembre 2008 Giovambattista Fazioli :

    Actualización: Microsoft Internet Explorer 7, la fecha en forma numérica, tipo "3 5, 2008" , produce el error. Para eliminar sólo entrar en el "mes" en el formato de tres letras Inglés: Jan, Feb, Mar, etc ...

    Responder Citar
  5. 05 de octubre 2009 Pablo:

    @ Giovambattista Fazioli:

    hola a todos.
    Encontré este script muy interesante.
    Mi único problema? Ser un idiota me parece difícil insertar JavaScript en una página web.
    El cambio en el código que iba a hacer era "volver" en lugar de document.write, pero no puedo recordar el ID de la página no entender lo que yo uso.
    ¿Me pueden ayudar?
    gracias
    ¡Hola

    Responder Citar

Deja un comentario

XHTML PERMISO TAG: <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 [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL