CountDown une classe en Javascript

Lundi, Octobre 13, 2008

Dans l'après 3D Countdown with FIVe3D (voir aussi How I Did It: Rédiger un compte à rebours en Flash), a donné une classe pour créer un objet compte à rebours en Actionscript, voici une version similaire en Javascript:

JavaScript:
  1. / **
  2. * Class CountDown
  3. *
  4. * @ Author Giovambattista Fazioli
  5. * @ Undolog.com Email@g.fazioli
  6. * @ Http://www.undolog.com Web
  7. *
  8. Dd * @ param (string) 'mois jour, année'
  9. *
  10. * /
  11. dd ) { fonction compte à rebours (DD) (
  12. / / Temps cible Init
  13. new Date ( dd ) ; var target = new Date (dd);
  14. = target. getTime ( ) ; ce targetTime. = cible. getTime ();
  15. / **
  16. * Compte à rebours Refresh
  17. * /
  18. = function ( ) { Cette actualisation. = function () (
  19. new Date ( ) ; var today = new Date ();
  20. today. getTime ( ) ; var = currentTime aujourd'hui. getTime ();
  21. / / Temps restant
  22. ( this . targetTime - currentTime ) ; cela. _leftMilliseconds = (this. targetTime - currentTime);
  23. Math. floor ( this ._leftMilliseconds / 1000 ) ; cela. _leftSeconds = Math. étage (this. _leftMilliseconds / 1000);
  24. Math. floor ( this ._leftSeconds / 60 ) ; cela. _leftMinutes = Math. étage (this. _leftSeconds / 60);
  25. Math. floor ( this ._leftMinutes / 60 ) ; cela. _leftHours = Math. étage (this. _leftMinutes / 60);
  26. / / Aucun module
  27. = Math. floor ( this ._leftHours / 24 ) ; cela. leftDays = Math. étage (this. _leftHours / 24);
  28. / / Pour imprimer
  29. = this ._leftMilliseconds % 1000 ; cela. leftMilliseconds = this. _leftMilliseconds% 1000;
  30. = this ._leftSeconds % 60 ; cela. leftSeconds = this. _leftSeconds% 60;
  31. = this ._leftMinutes % 60 ; cela. leftMinutes = this. _leftMinutes% 60;
  32. = this ._leftHours % 24 ; cela. leftHours = this. _leftHours% 24;
  33. )
  34. ( ) ; Cette actualisation. ();
  35. )

Exemple

JavaScript:
  1. new countDown ( '1 1, 2009' ) ; var cd = nouveau compte à rebours ('1 1, 2009 ');
  2. / / Affiche combien de jours, heures, minutes, secondes et millisecondes à Janvier 2009
  3. cd. leftDays + "," + cd. leftHours + "," + cd. leftMinutes + "," + cd. leftSeconds + "," + cd. leftMilliseconds ) ; document. write (Cx leftDays + "" + CD. leftHours + "" + CD. leftMinutes + "" + CD. leftSeconds + "" + CD. leftMilliseconds);

Related Post

Cet article était utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Chargement ...

5 commentaires pour "Un compte à rebours classe en Javascript»

  1. getAvatar 1.0
    14 octobre 2008 Richard Worthy:

    Bonjour Giovambattista,
    Je trouve très intéressant cette solution JavaScript, parce qu'elle est simple. Comme un amoureux du script, j'ai fait quelques changements à votre code que vous placez le texte suivant:

    JavaScript:
    1. dd ) { fonction compte à rebours (DD) (
    2. / / Temps cible Init
    3. new Date ( dd ) ; var target = new Date (dd);
    4. = target. getTime ( ) ; ce targetTime. = cible. getTime ();
    5. / **
    6. * Compte à rebours Refresh
    7. * /
    8. = function ( ) { Cette actualisation. = function () (
    9. new Date ( ) ; var today = new Date ();
    10. today. getTime ( ) ; var = currentTime aujourd'hui. getTime ();
    11. / / Temps restant
    12. = this . targetTime - currentTime ; cela. leftMilliseconds = this. targetTime - currentTime;
    13. = Math. floor ( this . leftMilliseconds / 1000 ) ; cela. leftSeconds = Math. étage (this. leftMilliseconds / 1000);
    14. = Math. floor ( this . leftSeconds / 60 ) ; cela. leftMinutes = Math. étage (this. leftSeconds / 60);
    15. = Math. floor ( this . leftMinutes / 60 ) ; cela. leftHours = Math. étage (this. leftMinutes / 60);
    16. = Math. floor ( this . leftHours / 24 ) ; cela. leftDays = Math. étage (this. leftHours / 24);
    17. ( ) ; cela. render ();
    18. );
    19. = function ( ) { cela. render = function () (
    20. = this . ms = this . leftMilliseconds % 1000 ; cela. leftMilliseconds = this. ms = this. leftMilliseconds% 1000;
    21. = this . s = this . leftSeconds % 60 ; cela. leftSeconds = this. s = this. leftSeconds% 60;
    22. = this . m = this . leftMinutes % 60 ; cela. leftMinutes = this. m = this. leftMinutes% 60;
    23. = this . h = this . leftHours % 24 ; cela. leftHours = this. h = this. leftHours% 24;
    24. = this . leftDays ; cela. d = this. leftDays;
    25. );
    26. = function ( _format ) { cette sortie. = function (_format) (
    27. _format. split ( ' ' ) || 'dhms ms' , output = '' ; format var = _format. split ('') | | 'ms DHMS ", output ='';
    28. / / Alert (FN), commenté par Undo = = : D
    29. var t in format ) { for (var t en format) (
    30. this [ format [ t ] ] ) output += this [ format [ t ] ] + ( ( t != format. length - 1 ) ? ', ' : '' ) ; if (this [format [t]]) sortie + = this [format [t]] + ((t! = format. longueur - 1)?',':'');
    31. )
    32. output ) ; document. write (output);
    33. );
    34. ( ) ; Cette actualisation. ();
    35. )

    Fondamentalement ajoutant davantage de structure et représentées par la méthode de sortie, qui vous permet d'imprimer le compte à rebours avec le format souhaité par l'utilisateur (de façon très semblable se produit, comme en PHP).
    Par exemple, si vous vouliez imprimer la date, heures, minutes, secondes et millisecondes manquants grâce à notre compte à rebours, nous pourrions procéder comme suit, chaque fois, sans aucun recours à l'appel du propriétés internes de notre classe:

    JavaScript:
    1. new countDown ( '1 1, 2009' ) ; var cd = nouveau compte à rebours ('1 1, 2009 ');
    2. 'dhms ms' ) ; cd. output ( 'ms DHMS');

    La méthode de «rendre» prend enfin soin de la «normaliser» le format des nombres.

    Un autre ajout intéressant serait d'une méthode "start", qui appelle la sortie périodiquement et ainsi tu ressembles à un véritable compte à rebours (Countdown qui peut être arrêtée que par leur mode "stop").

    Richard Worthy

  2. getAvatar 1.0
    14 octobre 2008 Giovambattista Fazioli:

    @ Richard Worthy: en fait une variante agréable, bravo! Surtout technique intéressante pour formater la sortie: ingénieuse et subtile! Dans la output() méthode output() aurait mis une limite au return(output) plutôt que d'un document.write() ... mais c'est un détail. Une minuterie avec start() et stop() font tous vraiment complet. Félicitations et merci pour les suggestions intéressantes :)

  3. getAvatar 1.0
    15 octobre 2008 Richard Worthy:

    @ Giovambattista Fazioli:

    Dans la output() méthode output() aurait mis une limite au return(output) plutôt que d'un document.write()

    Certes, je suis entré dans le document.write() pour une notification rapide de l'essai, dans la version finale de production et un return est un must ;)

    Félicitations et merci pour les suggestions intéressantes :)

    Rien, je suis heureux que l'échange de conseils techniques :)

    Bientôt,
    Richard Worthy

  4. getAvatar 1.0
    20 novembre 2008 Giovambattista Fazioli:

    Mise à jour: Microsoft Internet Explorer 7, la date au format numérique, tapez "3 5, 2008" qui produit des erreurs. Pour supprimer il suffit d'entrer le "mois" en utilisant 3 lettres en anglais: Jan, Feb, Mar, etc ...

  5. getAvatar 1.0
    05 ottobre 2009 Paul:

    @ Giovambattista Fazioli:

    Bonjour tout le monde.
    J'ai trouvé ce script très intéressant.
    Mon seul problème? Être un idiot avec le javascript de la difficulté à insérer dans une page web.
    Le changement que j'ai fait le code a été mis "retour" au lieu de document.write, mais je ne me souviens pas, alors la page d'identification ne pas comprendre ce que j'utilise.
    Pouvez-vous m'aider?
    merci
    bonjour

Laissez un commentaire

TAG PERMISSIONS XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE:
 <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