Commenti a: Una classe countDown in Javascript

Di: Paolo

Paolo — Mon, 05 Oct 2009 13:28:00 +0000

@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

Giovambattista Fazioli — Thu, 20 Nov 2008 20:31:00 +0000

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

Riccardo Degni — Wed, 15 Oct 2008 10:45:03 +0000

@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

Giovambattista Fazioli — Tue, 14 Oct 2008 20:27:48 +0000

@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

Riccardo Degni — Tue, 14 Oct 2008 14:03:08 +0000

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:

PLAIN TEXT

JavaScript:

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=   
        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:

PLAIN TEXT

JavaScript:

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