- Conteggio alla rovescia in JavaScript -
  
COSA SERVE PER QUESTO TUTORIAL
Download | Chiedi sul FORUM | Glossario Conoscenza basica di HTML e JavaScript.
Come creare un countdown in JavaScript

CODICE SORGENTE
<html>
<head>
<script type="text/javascript">

// Estendiamo con nuove funzionalità l'oggetto Date
// per aggiungere o togliere anni, mesi, giorni, ore
// secondi o millisecondi
Date.prototype.addYears = function(value) {
    this.setFullYear(this.getFullYear() + value);
    return this;
}
Date.prototype.addMonths = function(value) {
    this.setDate(this.getDate() + value);
    return this;
}
Date.prototype.addDays = function(value) {
    this.setDate(this.getDate() + value);
    return this;
}
Date.prototype.addHours = function(value) {
    this.setHours(this.getHours() + value);
    return this;
}
Date.prototype.addMinutes = function(value) {
    this.setMinutes(this.getMinutes() + value);
    return this;
}
Date.prototype.addSeconds = function(value) {
    this.setSeconds(this.getSeconds() + value);
    return this;
}
Date.prototype.addMilliseconds = function(value) {
    this.setMilliseconds(this.getMilliseconds() + value);
    return this;
}

// Date per le quali fare il conto alla rovescia
var dates = [
    // 12 Maggio 2054
    new Date(2054, 05, 12),
    // 28 Giugno 2087, alle 14:21:45
    new Date(2087, 06, 28, 14, 21, 45),
    // Tra un anno, un mese e così via
    new Date().addYears(1),
    new Date().addMonths(1),
    new Date().addDays(1),
    new Date().addHours(1),
    new Date().addMinutes(1),
    new Date().addSeconds(5),
    new Date().addMilliseconds(14500)
];

window.onload = function () {
    var container = document.getElementById("countdown");
    for (c = 0; c < dates.length; c++) {
        if (dates[c] != null) {
            // Creiamo un DIV per contenere il conteggio
            var newDiv = document.createElement("div");
            // Ciascun DIV avrà ID del tipo counter1, counter2, ...
            newDiv.id = "counter" + c;
            // Aggiungiamo un nodo di testo al DIV appena creato
            newDiv.appendChild(document.createTextNode("&nbsp;"));
            container.appendChild(newDiv);
        }
    }
    // Chiamiamo la funzione di aggiornamento ogni decimo di secondo
    window.setInterval(updateCountDown, 100);
}

// Aggiorniamo tutti i conteggi
function updateCountDown() {
    for (c = 0; c < dates.length; c++) {
    
        var div = document.getElementById("counter" + c);
        
        // Effettuiamo la sottrazione tra la data del conteggio e quella
        // attuale
        var total = dates[c] - new Date();
        
        // Verifichiamo se la da data è futura o passata
        var isPast = (total < 0);
        total = total < 0 ? -total : total;
        
        // Calcoliamo millisecondi, secondi, minuti e così via
        var milliseconds = total % 1000; total -= milliseconds; total /= 1000;
        var seconds = total % 60; total -= seconds; total /= 60;
        var minutes = total % 60; total -= minutes; total /= 60;
        var hours = total % 24; total -= hours; total /= 24;
        var days = total % 30; total -= days; total /= 30;
        var months = total % 12; total -= months; total /= 12;
        var years = total;
        
        // Stringa testuale per rappresentare la differenza di tempo
        var tempo = years + " anni, " +
            months + " mesi, " +
            days + " giorni, " +
            hours + " ore, " +
            minutes + " minuti e " +
            seconds + " secondi"
        
        // Mostriamo nel DIV
        if (isPast)
            div.firstChild.nodeValue = "Sono passati " + 
                tempo + " da " + dates[c].toDateString() + ".";
        else
            div.firstChild.nodeValue = "Mancano " + 
                tempo + " a " + dates[c].toDateString() + ".";
            
    }
}

</script>
</head>
<body>
<div id="countdown"></div>
</body>
<< INDIETRO by VeNoM00