Spesso può essere utile presentare agli utenti di un sito una barra di caricamento la cui funzionalità, nella maggior parte dei casi, è prettamente grafica. Ad esempio prima di effettuare un’operazione, all’utente può essere presentata una barra di caricamento che si completa in funzione di un timer alla cui conclusione effettua la particolare operazione.
Andremo a descrivere da prima il codice Javascript:
02 | var ora = parseFloat(document.rovescia.conto.value); |
04 | document.rovescia.conto.value=ora; |
06 | document.getElementById( "barra" ).innerHTML= "<div style='height:10px; width:" +g_c+ "px; background-color:#FF0000'></div>" ; |
08 | location.href = "reindirizzamento.html" ; |
10 | conto = setTimeout( "countdown()" ,500); |
Utilizzeremo un contatore immagazzinato in un input hidden che chiameremo “conto”. Viceversa un altro blocco che chiameremo “barra” conterrà l’avanzamento del caricamento. Dopo 60 secondi la barra di caricamento sarà completata.
L’aspetto grafico della barra verrà implementata con un semplice DIV e un minimo di CSS.
Ora vediamo lo script inserito in una pagina html:
03 | < title >Pagina di reindirizzamento</ title > |
04 | < script type = "text/javascript" > |
06 | var ora = parseFloat(document.rovescia.conto.value); |
08 | document.rovescia.conto.value=ora; |
10 | document.getElementById("barra").innerHTML="< div style = 'height:10px; width:"+g_c+"px; background-color:#FF0000' ></ div >"; |
12 | location.href = "reindirizzamento.html"; |
14 | conto = setTimeout("countdown()",500); |
19 | Stai per essere reindirizzato alla pagina corretta... |
21 | < form name = 'rovescia' action = '#' > |
22 | < input type = 'hidden' name = 'conto' value = '0' /> |
24 | < div class = 'barra' id = 'barra' style = 'border:1px solid #000000; width:180px;' > |
25 | < script type = "text/javascript" > |