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 |
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:
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
/ / 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:
2
'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
@ 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 methodoutput()would put a limit to thereturn(output)more than adocument.write()... but it's a detail. , renderebbe il tutto davvero completo. A timer withstart()andstop(), make it all very complete. Congratulations and thanks for the interesting suggestions@ Giovambattista Fazioli:
è d'obbligo Of course, I put the
document.write()for immediate notification of the tests, the final production version of areturnis obligatoryYou're welcome, I was pleased that the exchange of technical advice
See you soon,
Richard Worth
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 ...@ 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