Commenti a: Una classe countDown in Javascript http://www.undolog.com/2008/10/13/una-classe-countdown-in-javascript/ Research & Development Blog Thu, 09 Feb 2012 11:24:28 +0000 hourly 1 http://wordpress.org/?v=3.3.1 Di: Paolo http://www.undolog.com/2008/10/13/una-classe-countdown-in-javascript/#comment-2493 Paolo Mon, 05 Oct 2009 13:28:00 +0000 http://www.undolog.com/?p=791#comment-2493 <b>@Giovambattista Fazioli</b>: ciao a tutti. ho trovato questo script molto interessante. Il mio unico problema? Essendo un idiota con javascript trovo difficile inserirlo in una pagina web. La modifica che avrei fatto al codice è stata mettere "return" al posto di document.write ma non so poi richiamarlo nella pagina non capendo quale id devo usare. potete aiutarmi? grazie ciao @Giovambattista Fazioli:

ciao a tutti.
ho trovato questo script molto interessante.
Il mio unico problema? Essendo un idiota con javascript trovo difficile inserirlo in una pagina web.
La modifica che avrei fatto al codice è stata mettere “return” al posto di document.write ma non so poi richiamarlo nella pagina non capendo quale id devo usare.
potete aiutarmi?
grazie
ciao

]]> Di: Giovambattista Fazioli http://www.undolog.com/2008/10/13/una-classe-countdown-in-javascript/#comment-1406 Giovambattista Fazioli Thu, 20 Nov 2008 20:31:00 +0000 http://www.undolog.com/?p=791#comment-1406 <b>Aggiornamento</b>: su Microsoft Internet Explorer 7 la data in formato numerico, tipo <code inline="true">"3 5, 2008"</code>, produce errore. Per eliminarlo basta inserire il "mese" nel formato 3 lettere in inglese: Jan, Feb, Mar, etc... Aggiornamento: su Microsoft Internet Explorer 7 la data in formato numerico, tipo "3 5, 2008", produce errore. Per eliminarlo basta inserire il “mese” nel formato 3 lettere in inglese: Jan, Feb, Mar, etc…

]]> Di: Riccardo Degni http://www.undolog.com/2008/10/13/una-classe-countdown-in-javascript/#comment-1223 Riccardo Degni Wed, 15 Oct 2008 10:45:03 +0000 http://www.undolog.com/?p=791#comment-1223 @Giovambattista Fazioli</b>: <blockquote> Nel metodo <code inline="true">output()</code> metterei al limite un <code inline="true">return(output)</code> più che un <code inline="true">document.write()</code></blockquote> Certamente, ho inserito il <code inline="true">document.write()</code> per una notifica immediata dei test, nella versione definitiva di produzione un <code inline="true">return</code> è <strong>d'obbligo</strong> ;) <blockquote> Complimenti e grazie per gli interessanti suggerimenti :) </blockquote> Di niente, mi ha fatto piacere questo scambio di pareri tecnici :) A presto, Riccardo Degni @Giovambattista Fazioli:

Nel metodo output() metterei al limite un return(output) più che un document.write()

Certamente, ho inserito il document.write() per una notifica immediata dei test, nella versione definitiva di produzione un return è d’obbligo ;)

Complimenti e grazie per gli interessanti suggerimenti :)

Di niente, mi ha fatto piacere questo scambio di pareri tecnici :)

A presto,
Riccardo Degni

]]> Di: Giovambattista Fazioli http://www.undolog.com/2008/10/13/una-classe-countdown-in-javascript/#comment-1216 Giovambattista Fazioli Tue, 14 Oct 2008 20:27:48 +0000 http://www.undolog.com/?p=791#comment-1216 <b>@Riccardo Degni</b>: davvero una bella variante, bravo! Interessante soprattutto la tecnica per formattare l'output: ingegnosa e sottile! Nel metodo <code inline="true">output()</code> metterei al limite un <code inline="true">return(output)</code> più che un <code inline="true">document.write()</code>... ma è un dettaglio. Un timer, con <code inline="true">start()</code> e <code inline="true">stop()</code>, renderebbe il tutto davvero completo. Complimenti e grazie per gli interessanti suggerimenti :) @Riccardo Degni: davvero una bella variante, bravo! Interessante soprattutto la tecnica per formattare l’output: ingegnosa e sottile! Nel metodo output() metterei al limite un return(output) più che un document.write()… ma è un dettaglio. Un timer, con start() e stop(), renderebbe il tutto davvero completo. Complimenti e grazie per gli interessanti suggerimenti :)

]]> Di: Riccardo Degni http://www.undolog.com/2008/10/13/una-classe-countdown-in-javascript/#comment-1215 Riccardo Degni Tue, 14 Oct 2008 14:03:08 +0000 http://www.undolog.com/?p=791#comment-1215 Ciao Giovambattista, trovo molto interessante questa soluzione Javascript, perchè è semplice e leggera. Da amante dello scripting, ho apportato alcune modifiche al tuo codice che ti posto di seguito: [cc_js] function countDown( dd ) { // init target time var target = new Date( dd ); this.targetTime = target.getTime(); /** * refresh countdown */ this.refresh = function() { var today = new Date(); var currentTime = today.getTime(); // time left this.leftMilliseconds = this.targetTime - currentTime; this.leftSeconds = Math.floor(this.leftMilliseconds / 1000); this.leftMinutes = Math.floor(this.leftSeconds / 60); this.leftHours = Math.floor(this.leftMinutes / 60); this.leftDays = Math.floor(this.leftHours / 24); this.render(); }; this.render = function() { this.leftMilliseconds = this.ms = this.leftMilliseconds%1000; this.leftSeconds = this.s = this.leftSeconds%60; this.leftMinutes = this.m = this.leftMinutes%60; this.leftHours = this.h = this.leftHours%24; this.d = this.leftDays; }; this.output = function(_format) { var format = _format.split(' ') || 'd h m s ms', output = ''; // alert(fn); commentato da =undo= :D for(var t in format) { if(this[format[t]]) output += this[format[t]] + ((t!=format.length-1) ? ', ' : ''); } document.write(output); }; this.refresh(); } [/cc_js] In sostanza l'aggiunta più corposa è rappresentata dal metodo <strong>output</strong>, che permette di stampare il countdown con il formato desiderato dall'utente (in una maniera molto simile a come accade nel PHP). Se ad esempio si volessero stampare il giorno, l'ora, i minuti, i secondi ed i millisecondi mancanti tramite il nostro countdown, si potrebbe procedere nel seguente modo, senza ogni volta ricorrere al richiamo delle proprietà interne della nostra classe: [cc_js] var cd = new countDown( '1 1, 2009' ); cd.output('d h m s ms'); [/cc_js] Il metodo "render" si occupa infine del "normalizzare" il formato dei numeri. Un'altra aggiunta interessante potrebbe essere quella di un metodo "start", che richiama il metodo output periodicamente in modo che sembri un vero e proprio countdown (countdown che potrà essere fermato dal rispettivo metodo "stop"). Riccardo Degni Ciao Giovambattista,
trovo molto interessante questa soluzione Javascript, perchè è semplice e leggera. Da amante dello scripting, ho apportato alcune modifiche al tuo codice che ti posto di seguito:

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
function countDown( dd ) {
    // init target time
    var target            = new Date( dd );
    this.targetTime       = target.getTime();
   
    /**
     * refresh countdown
     */
    this.refresh = function() {
        var today             = new Date();
        var currentTime       = today.getTime();
        // time left
        this.leftMilliseconds = this.targetTime - currentTime;
        this.leftSeconds      = Math.floor(this.leftMilliseconds / 1000);
        this.leftMinutes      = Math.floor(this.leftSeconds / 60);
        this.leftHours        = Math.floor(this.leftMinutes / 60);
        this.leftDays         = Math.floor(this.leftHours / 24);
        this.render();
    };

    this.render = function() {
        this.leftMilliseconds = this.ms = this.leftMilliseconds%1000;
        this.leftSeconds = this.s = this.leftSeconds%60;
        this.leftMinutes = this.m = this.leftMinutes%60;
        this.leftHours = this.h = this.leftHours%24;
        this.d = this.leftDays;
    };
   
    this.output = function(_format) {
        var format = _format.split(' ') || 'd h m s ms', output = '';
        // alert(fn); commentato da =undo= :D
        for(var t in format) {
            if(this[format[t]]) output += this[format[t]] + ((t!=format.length-1) ? ', ' : '');
        }
        document.write(output);
    };
   
    this.refresh();
}

In sostanza l’aggiunta più corposa è rappresentata dal metodo output, che permette di stampare il countdown con il formato desiderato dall’utente (in una maniera molto simile a come accade nel PHP).
Se ad esempio si volessero stampare il giorno, l’ora, i minuti, i secondi ed i millisecondi mancanti tramite il nostro countdown, si potrebbe procedere nel seguente modo, senza ogni volta ricorrere al richiamo delle proprietà interne della nostra classe:

1
2
var cd = new countDown( '1 1, 2009' );
cd.output('d h m s ms');

Il metodo “render” si occupa infine del “normalizzare” il formato dei numeri.

Un’altra aggiunta interessante potrebbe essere quella di un metodo “start”, che richiama il metodo output periodicamente in modo che sembri un vero e proprio countdown (countdown che potrà essere fermato dal rispettivo metodo “stop”).

Riccardo Degni

]]>