A class countdown in Javascript

In the post with 3D CountDown FIVe3D (see also How I Did It: write a countdown to Flash ), was proposed to create a class object in Actionscript CountDown, here's a similar version in 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
/ **
* Class CountDown
*
* @ Author Giovambattista Fazioli
* @ @ Email g.fazioli undolog.com
* @ Web http://www.undolog.com
*
* @ Param dd (string) 'month day, year'
*
* /
dd ) { function countdown (dd) {
/ / Init target time
new Date ( dd ) ; var target = new Date (dd);
= target. getTime ( ) ; this. targetTime = target. getTime ();

/ **
* Refresh countdown
* /
= function ( ) { this. refresh = function () {
new Date ( ) ; var today = new Date ();
today. getTime ( ) ; var today = currentTime. getTime ();
/ / Time left
( this . targetTime - currentTime ) ; this. _leftMilliseconds = (this. targetTime - currentTime);
Math. floor ( this ._leftMilliseconds / 1000 ) ; this. _leftSeconds = Math. floor (this. _leftMilliseconds / 1000);
Math. floor ( this ._leftSeconds / 60 ) ; this. _leftMinutes = Math. floor (this. _leftSeconds / 60);
Math. floor ( this ._leftMinutes / 60 ) ; this. _leftHours = Math. floor (this. _leftMinutes / 60);
/ / No module
= Math. floor ( this ._leftHours / 24 ) ; this. leftDays = Math. floor (this. _leftHours / 24);
/ / For print
= this ._leftMilliseconds % 1000 ; this. leftMilliseconds = this. _leftMilliseconds% 1000;
= this ._leftSeconds % 60 ; this. leftSeconds = this. _leftSeconds 60%;
= this ._leftMinutes % 60 ; this. leftMinutes = this. _leftMinutes 60%;
= this ._leftHours % 24 ; this. leftHours = this. _leftHours 24%;
}
( ) ; this. refresh ();
}

Example

1
2
3
new countDown ( '1 1, 2009' ) ; var cd = new CountDown (1 '1, 2009 ');
/ / Show how many days, hours, minutes, seconds and milliseconds to January 1, 2009

5 comments to "A class countdown in Javascript"

  1. October 14, 2008 Richard Worth :

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

    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 ) { function countdown (dd) {
    / / Init target time
    new Date ( dd ) ; var target = new Date (dd);
    = target. getTime ( ) ; this. targetTime = target. getTime ();

    / **
    * Refresh countdown
    * /
    = function ( ) { this. refresh = function () {
    new Date ( ) ; var today = new Date ();
    today. getTime ( ) ; var today = currentTime. getTime ();
    / / Time left
    = this . targetTime - currentTime ; this. leftMilliseconds = this. targetTime - currentTime;
    = Math. floor ( this . leftMilliseconds / 1000 ) ; this. leftSeconds = Math. floor (this. leftMilliseconds / 1000);
    = Math. floor ( this . leftSeconds / 60 ) ; this. leftMinutes = Math. floor (this. leftSeconds / 60);
    = Math. floor ( this . leftMinutes / 60 ) ; this. leftHours = Math. floor (this. leftMinutes / 60);
    = Math. floor ( this . leftHours / 24 ) ; this. leftDays = Math. floor (this. leftHours / 24);
    ( ) ; this. render ();
    };

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

    = function ( _format ) { this. output = function (_format) {
    _format. split ( ' ' ) || 'dhms ms' , output = '' ; var format = _format. split ('') | | 'dhms ms', output ='';
    / / Alert (fn), commented by = undo =: D
    var t in format ) { for (var t format) {
    this [ format [ t ] ] ) output += this [ format [ t ] ] + ( ( t != format. length - 1 ) ? ', ' : '' ) ; if (this [format [t]]) output + = this [format [t]] + ((t! = format. length - 1)? ',':'');
    }
    output ) ; document. write (output);
    };

    ( ) ; this. refresh ();
    }

    In essence, adding more body is represented by the output method, which allows you to print the countdown with the format desired by the user (in a manner very similar to what happens in PHP).
    For example, if you wanted to print the day, hour, minutes, seconds and milliseconds missing through our countdown, we could proceed as follows, each time without resorting to the call of the internal properties of our class:

    1
    2
    new countDown ( '1 1, 2009' ) ; var cd = new CountDown (1 '1, 2009 ');
    'dhms ms' ) ; cd. Output ('dhms ms');

    The method "render" also looks after the "normalize" the format of numbers.

    Another interesting addition could be a way to "start", which invokes the output periodically to look like a real countdown (countdown that can be stopped by the respective method "stop").

    Richard Worth

  2. October 14, 2008 Giovambattista Fazioli :

    @ Richard Worth: a really nice version, bravo! Especially interesting technique to format the output: ingenious and subtle! più che un document.write() … ma è un dettaglio. In the method output() would put a limit to the return(output) more than a document.write() ... but it's a detail. , renderebbe il tutto davvero completo. A timer with start() and stop() , make it all very complete. Congratulations and thanks for the interesting suggestions :)

  3. October 15, 2008 Richard Worth :

    @ Giovambattista Fazioli:

    più che un document.write() In the method output() would put a limit to the return(output) more than a document.write()

    è d'obbligo Of course, I put the document.write() for immediate notification of the tests, the final production version of a return is obligatory ;)

    Congratulations and thanks for the interesting suggestions :)

    You're welcome, I was pleased that the exchange of technical advice :)

    See you soon,
    Richard Worth

  4. November 20, 2008 Giovambattista Fazioli :

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

  5. October 5, 2009 Paul:

    @ Giovambattista Fazioli:

    hello all.
    I found this script very interesting.
    My only problem? Being an idiot I find difficult to insert JavaScript in a web page.
    The change to the code that I would do was to "return" instead of document.write but I can not recall then the page id not understanding what I use.
    Can you help me?
    thanks
    hello

Leave a comment

XHTML TAG PERMIT: <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 [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