CountDown a class in Javascript

Monday, October 13, 2008

In the post 3D Countdown with FIVe3D (also see How I Did It: Write a countdown in Flash), was given a class for creating an object CountDown in Actionscript, here is a similar version in Javascript:

JavaScript:
  1. / **
  2. * Class CountDown
  3. *
  4. * @ Author Giovambattista Fazioli
  5. * @ Email @ g.fazioli undolog.com
  6. * @ Web http://www.undolog.com
  7. *
  8. Dd * @ param (string) 'month day, year'
  9. *
  10. * /
  11. dd ) { function countdown (dd) (
  12. / / Init target time
  13. new Date ( dd ) ; var target = new Date (dd);
  14. = target. getTime ( ) ; this. targetTime = target. getTime ();
  15. / **
  16. * Refresh countdown
  17. * /
  18. = function ( ) { this. refresh = function () (
  19. new Date ( ) ; var today = new Date ();
  20. today. getTime ( ) ; var currentTime = today. getTime ();
  21. / / Time left
  22. ( this . targetTime - currentTime ) ; this. _leftMilliseconds = (this. targetTime - currentTime);
  23. Math. floor ( this ._leftMilliseconds / 1000 ) ; this. _leftSeconds = Math. floor (this. _leftMilliseconds / 1000);
  24. Math. floor ( this ._leftSeconds / 60 ) ; this. _leftMinutes = Math. floor (this. _leftSeconds / 60);
  25. Math. floor ( this ._leftMinutes / 60 ) ; this. _leftHours = Math. floor (this. _leftMinutes / 60);
  26. / / No module
  27. = Math. floor ( this ._leftHours / 24 ) ; this. leftDays = Math. floor (this. _leftHours / 24);
  28. / / For print
  29. = this ._leftMilliseconds % 1000 ; this. leftMilliseconds = this. _leftMilliseconds% 1000;
  30. = this ._leftSeconds % 60 ; this. leftSeconds = this. _leftSeconds% 60;
  31. = this ._leftMinutes % 60 ; this. leftMinutes = this. _leftMinutes% 60;
  32. = this ._leftHours % 24 ; this. leftHours = this. _leftHours% 24;
  33. )
  34. ( ) ; this. refresh ();
  35. )

Example

JavaScript:
  1. new countDown ( '1 1, 2009' ) ; var cd = new countdown ('1 1, 2009 ');
  2. / / Show how many days, hours, minutes, seconds and milliseconds to January 2009
  3. cd. leftDays + "," + cd. leftHours + "," + cd. leftMinutes + "," + cd. leftSeconds + "," + cd. leftMilliseconds ) ; document. write (cd. leftDays + "" + cd. leftHours + "" + cd. leftMinutes + "" + cd. leftSeconds + "" + cd. leftMilliseconds);

Related Post

Was this article helpful?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

5 comments to "A class countDown in Javascript"

  1. getAvatar 1.0
    October 14, 2008 Richard Worthy:

    Hello Giovambattista,
    I find very interesting this JavaScript solution, because it is simple. As a lover of scripting, I've made some changes to your code that you place the following:

    JavaScript:
    1. dd ) { function countdown (dd) (
    2. / / Init target time
    3. new Date ( dd ) ; var target = new Date (dd);
    4. = target. getTime ( ) ; this. targetTime = target. getTime ();
    5. / **
    6. * Refresh countdown
    7. * /
    8. = function ( ) { this. refresh = function () (
    9. new Date ( ) ; var today = new Date ();
    10. today. getTime ( ) ; var currentTime = today. getTime ();
    11. / / Time left
    12. = this . targetTime - currentTime ; this. leftMilliseconds = this. targetTime - currentTime;
    13. = Math. floor ( this . leftMilliseconds / 1000 ) ; this. leftSeconds = Math. floor (this. leftMilliseconds / 1000);
    14. = Math. floor ( this . leftSeconds / 60 ) ; this. leftMinutes = Math. floor (this. leftSeconds / 60);
    15. = Math. floor ( this . leftMinutes / 60 ) ; this. leftHours = Math. floor (this. leftMinutes / 60);
    16. = Math. floor ( this . leftHours / 24 ) ; this. leftDays = Math. floor (this. leftHours / 24);
    17. ( ) ; this. render ();
    18. );
    19. = function ( ) { this. render = function () (
    20. = this . ms = this . leftMilliseconds % 1000 ; this. leftMilliseconds = this. ms = this. leftMilliseconds% 1000;
    21. = this . s = this . leftSeconds % 60 ; this. leftSeconds = this. s = this. leftSeconds% 60;
    22. = this . m = this . leftMinutes % 60 ; this. leftMinutes = this. m = this. leftMinutes% 60;
    23. = this . h = this . leftHours % 24 ; this. leftHours = this. h = this. leftHours% 24;
    24. = this . leftDays ; this. d = this. leftDays;
    25. );
    26. = function ( _format ) { this. output = function (_format) (
    27. _format. split ( ' ' ) || 'dhms ms' , output = '' ; var format = _format. split ( '') | | 'dhms ms', output ='';
    28. / / Alert (fn); commented by = Undo = : D
    29. var t in format ) { for (var t in format) (
    30. this [ format [ t ] ] ) output += this [ format [ t ] ] + ( ( t != format. length - 1 ) ? ', ' : '' ) ; if (this [format [t]]) output + = this [format [t]] + ((t! = format. length - 1)? ',':'');
    31. )
    32. output ) ; document. write (output);
    33. );
    34. ( ) ; this. refresh ();
    35. )

    Basically adding more structure and represented by the output method, which allows you to print the countdown with the desired format by the user (in a very similar way as happens in PHP).
    For example, if you wanted to print the date, hours, minutes, seconds and milliseconds missing through our countdown, we could proceed as follows, each time with no recourse to appeal the internal properties of our class:

    JavaScript:
    1. new countDown ( '1 1, 2009' ) ; var cd = new countdown ('1 1, 2009 ');
    2. 'dhms ms' ) ; cd. output ( 'dhms ms');

    The method "render" finally takes care of the "normalize" the format of numbers.

    Another interesting addition would be to a method "start", which calls the output periodically, so you look like a real countdown (countdown that can be stopped by their method "stop").

    Richard Worthy

  2. getAvatar 1.0
    October 14, 2008 Giovambattista Fazioli:

    @ Richard Worthy: really a nice variant, bravo! Especially interesting technique to format the output: ingenious and subtle! In the method output() would put a limit to return(output) rather than a document.write() ... but it is a detail. A timer with start() and stop() make it all really complete. Congratulations and thanks for the interesting suggestions :)

  3. getAvatar 1.0
    October 15, 2008 Richard Worthy:

    @ Giovambattista Fazioli:

    In the method output() would put a limit to return(output) rather than a document.write()

    Certainly, I entered the document.write() for a prompt notification of the test, in the final version of production and a return is a must ;)

    Congratulations and thanks for the interesting suggestions :)

    Anything, I was pleased that exchange of technical advice :)

    Soon,
    Richard Worthy

  4. getAvatar 1.0
    November 20, 2008 Giovambattista Fazioli:

    Update: Microsoft Internet Explorer 7, the date in numeric format, type "3 5, 2008" produces error. To delete just enter the "month" using 3 letters in English: Jan, Feb, Mar, etc ...

  5. getAvatar 1.0
    05 ott, 2009 Paul:

    @ Giovambattista Fazioli:

    Hello everyone.
    I found this very interesting script.
    My only problem? Being an idiot with javascript find it difficult to insert into a web page.
    The change that I made the code has been put "return" instead of document.write, but I can not recall then the page id not understanding what I use.
    Can you help?
    thanks
    hello

Leave a comment

TAG XHTML PERMISSIONS: <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