[Javascript] Countdown, redirect e loader testuale

Si lo so, il titolo è un po’ criptico. Ma non me ne veniva in mente uno migliore, anche perchè nei fatti, quello che voglio segnare qui a futura memoria è come impostare un countdown in secondi, ed alla fine di questo reindirizzare la pagina ad un url da me scelto.

Mi serviva fare una cosa del genere per spostare alcuni servizi su un nuovo server (e su un nuovo dominio) senza costringere l’utente a cliccare sul nuovo collegamento, ma dando allo stesso tempo il modo di leggere un avviso di spostamento. Gli utenti a cui è diretta la cosa non sono dei pozzi di scienza… Meno clickano meglio è…

Ma partiamo con la stesura del codice, sfruttando la capacità di javascript di aggiornare elementi di una pagina, senza che questa venga ricaricata.

Il conto alla rovescia

function timering(seconds){
   if(seconds > 0){
    seconds–;
    document.getElementById(‘timing’).innerHTML = seconds;
    setTimeout(‘timering( ‘+ seconds +’ )’,1000);
   }
}

Fin quando il valore dei secondi non arriva a zero, faremo andare indietro il nostro conto alla rovescia, aggiornando con innerHTML l’id nel quale verrà effettivamente visualizzato il countdown.

Loader testuale

e = 0;
function puntini(){
   if(e <= 6){
     e++;
     h = document.getElementById(‘puntini’);
     h.innerHTML += ‘.’;
     setTimeout(‘puntini()’, 500);
   }

   if(e == 6){
     e = 0;
     h.innerHTML = ”;
   }
}

Per fare una cosa più carina, ho pure deciso di creare un loader testuale. Vicino ad una parola esplicativa del corpo del file (verosimilmente "Attendi"), compariranno in sequenza dei puntini. Uno ogni mezzo secondo. Dopo il quinto puntino, questi scompariranno per tornare a comparire uno alla volta creando quel effetto loader che fa tanto web2.0 (chissà poi perchè…).
Anche in questo caso la tecnica utilizzata è quella di aggiornare un id prescelto (nell’esempio è ‘puntini’), in maniera ricorsiva, aggiungendo al contenuto dell’id, e non aggiornandolo completamente.

Pronti e via!

function go(seconds, url){
setTimeout(‘timering( ‘+ seconds +’ )’,1000);
setTimeout(‘self.location="’+url+’"’,seconds*1000);
setTimeout(‘puntini()’,1000);
}

Questa funzione si occupa di mandare in loading tutto il codice, e soprattutto permette la scelta dei parametri:

  • I secondi di durata del countdown
  • L’url a cui reindirizzare l’utente alla fine del countdown stesso.

Come avviare la funzione?
Prima di tutto vanno inseriti i due id per il conteggio del countdown e la visualizzazione dei puntini per l’attesa. Dopo di che, basterà editare il tag body con la seguente direttiva:

<body onload="go(10, ‘http://www.google.it’)">

In questo modo, allo scadere dei dieci secondi, l’utente sarà reindirizzato a google.it.

Link allo script in azione!

2 thoughts on “[Javascript] Countdown, redirect e loader testuale”

  1. Che lavoraccio : - o !
    Io avrei usato un bel
    <META HTTP-EQUIV=”refresh” CONTENT=”seconds;URL=www.donninenude.com”>
    : -

Comments are closed.