.
.
Creare uno sfondo che
cambi colore esadecimale al variare del tempo
COSA VI
SERVIRA': - Qualche
conoscienza di base dell'HTML (tags, ecc.);
- Notepad o un qualsiasi editor di codice HTML (esistono anche editor
appositi ma non sono niente di particolare, uno dei più comodi è
CoffeCup);
1) Perchè lo script che stiamo per creare funzioni è strettamente necessario che esso venga inserito nel contesto di una pagina HTML all'interno delle tag <HEAD>; apriamo quindi il nostro editor e digitiamo il seguente codice:
<SCRIPT Language = "JavaScript">
start = new Date();
minstart = start.getMinutes()
secstart = start.getSeconds()
2) Dopo aver aperto la tag che
identifica lo script creiamo il riferimento temporale tramite new date()
e stabiliamo con le due successive variabili un inizio dei minuti ed un
inizio dei secondi; questo stratagemma ci permetterà di variare nei
secondi e nei minuti il colore del nostro sfondo. Ora digitiamo:
function illuminaz(){
var now = new Date();
var seconds = now.getSeconds();
var minutes = now.getMinutes();
var base = "00";
var color = 1000;
var interval = 103;
var sec= interval * (seconds - secstart);
var min= 60 * interval * (minutes - minstart);
var add= color + min + sec;
total= base + add;
3) aperta la funzione illuminaz(), abbiamo dichiarato tutte le variabili (locali) che serviranno a questo script: now= la data odierna, seconds= i secondi, minutes= i minuti, base= 00 (numero modificabile a piacere), color= 1000 (numero modificabile a piacere), interval= 103 (numero modificabile a piacere), sec= interval moltiplicato seconds meno secstart (che avevamo introdotto all'inizio), min= 60 per interval per minutes meno minstart (che avevamo introdotto all'inizio), add= color più min più sec, total= base più add (ovvero il colore che prenderà lo sfondo in esadecimale). Andiamo avanti:
if (add>=9999)
{secstart = seconds; minstart = minutes}
4) Tramite il ciclo if appena descritto controlliamo se add è maggiore o uguale a 9999, se sì settiamo secstart=seconds e minstart=minutes; la cosa può sembrare un po' macchinosa ma vedendo eseguito il codice di questo tutorial tutto sembrerà più chiaro. Adesso:
document.bgColor = total;
setTimeout("illuminaz()", 1000);
document.afigoz.casella.value = total;
}
</script>
5) Con queste ultime righe abbiamo settato il bgcolor della pagina uguale al valore di total (che è uguale a base più add), abbiamo settato il timeout e abbiamo "stampato" il valore di total in una textbox che nel passaggio sucessivo andremo a creare:
<body onLoad = "illuminaz()">
<form name="afigoz">
<P>Tah dah! Ecco il codice esadecimale dello sfondo della vostra
pagina:
<input name = "casella" type="text" size="7">
</form>
</body>
6) all'interno della tag <BODY> abbiamo inserito il comando onload (che ordina al browser di eseguire la funzione illuminaz() al caricamento della pagina). Si suppone che le righe successive alla suddetta siano di facile interpretazione.
________
<§ =>aFiGoZ<=§>
CI NUTRIAMO
DI INFORMAZIONI...
---------------
TORNA INDIETRO