INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Countdown in Dhtml

Autore: Luca Ruggiero | Tell a Friend

Corso Java
Impara a programmare col linguaggio OOP della Sun.

Corso Javascript e DHTML
Impara a creare controlli ed animazioni!

Corso Web Design
Disegno di siti Web con HTML, CSS e Dynamic HTML.

Grazie a poche righe di codice Javascript è possibile realizzare una routine che genera un conto alla rovescia, che può essere utilizzato, ad esempio, nella pagina iniziale di un sito, dando il benvenuto, o effettuando il redirect alla Homepage reale.

Il codice di esempio inizia il conteggio da 10 e si decrementa fino a 0:

<html>
    <head>
        <title>Countdown in Dhtml</title>
        <script language="javascript">
            <!--
                var inizio = 10;
                function Countdown()
                {
                    testo.innerHTML = inizio;
                    inizio--;
                    if (inizio >= 0)
                    {
                        window.setTimeout("Countdown()", 1000);
                    }
                    else
                    {
                        testo.innerHTML = "Tempo scaduto :-)";
                    }
                }
                
            //-->
        </script>
    </head>
<body onLoad="Countdown()">

<div id="testo"></div>

</body>
</html>
Nell'header della pagina imposto il codice Javascript che vede al centro della scena la funzione Countdown() e nel corpo un layer di tipo <div> con un identificativo univoco di tipo ID con valore testo. Nella funzione inizializzo il valore del layer ed effettuo il decremento dell'intero 10; controllo poi che il valore sia maggiore o uguale a zero prima di lanciare il messaggio, o scatenare l'evento del caso.

TAGS - countdown, javascript, dhtml

IN EVIDENZA
HOT LINKS