Sfuma il colore di sfondo

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript

COMPATIBILITÀ: Ms Ie, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

Torniamo, all'interno di questa mailing list, sull'argomento grafica e pi precisamente sulla gestione dinamica dello sfondo di una pagina Web. Abbiamo visto in passato come modificare lo sfondo con un click (www.risorse.net/dhtml/teoria/secondo.asp) oppure con il semplice passaggio del mouse sopra i differenti colori (www.risorse.net/dhtml/teoria/1999/giugno/8.asp). Questa settimana invece, esamineremo una demo che prevede il cambiamento del colore di sfondo in automatico, e precisamente sfumando le varie tinte allo scandire dei secondi di un orologio in formato digitale.
Vediamo quindi il codice sorgente da inserire tra i tag <HEAD></HEAD> del file:

<script Language="JavaScript">
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}

function startclock () {
stopclock();
showtime();
}
var r, g, b;
var rdir, gdir, bdir;
var rinc, ginc, binc;
var rlo, glo, blo, rhi, ghi, bhi;

function StringArray (n) {
this.length = n;
for (var i = 1; i <= n; i++){
this[i] = ''
}
return this
}

hex = new StringArray(16);
hex[0]="0";
hex[1]="1";
hex[2]="2";
hex[3]="3";
hex[4]="4";
hex[5]="5";
hex[6]="6";
hex[7]="7";
hex[8]="8";
hex[9]="9";
hex[10]="a";
hex[11]="b";
hex[12]="c";
hex[13]="d";
hex[14]="e";
hex[15]="f";

function showtime () {
if (rdir == "up") {
if (r >= rhi) { rdir = "down"; r-=rinc; if (rinc > 0) { r++;

} }
else { r += rinc; }
}
else if (rdir == "down") {
if (r <= rlo) { rdir = "up"; r+=rinc }
else { r -= rinc; }
}
if (gdir == "up") {
if (g >= ghi) { gdir = "down"; g-=ginc; if (ginc > 0) { g++;

}}
else { g += ginc; }
}
else if (gdir == "down") {
if (g <= glo) { gdir = "up"; g+=ginc}
else { g -= ginc; }
}
if (bdir == "up") {
if (b >= bhi) { bdir = "down"; b-=binc; if (binc > 0) { b++;

}}
else { b += binc; }
}
else if (bdir == "down") {
if (b <= blo) { bdir = "up"; b+=binc}
else { b -= binc; }
}
if (r > rhi) { r=rhi; if (r > 255) { r = 255; } }
if (g > ghi) { g=ghi; if (g > 255) { g = 255; } }
if (b > bhi) { b=bhi; if (b > 255) { b = 255; } }
if (r < rlo) { r=rlo; }
if (g < glo) { g=glo; }
if (b < blo) { b=blo; }

var RGB = "";

RGB += "" + hex[(Math.floor(r / 16))] + hex[Math.floor(r -

((Math.floor(r / 16)) * 16))];

RGB += "" + hex[(Math.floor(g / 16))] + hex[Math.floor(g -

((Math.floor(g / 16)) * 16))];

RGB += "" + hex[(Math.floor(b / 16))] + hex[Math.floor(b -

((Math.floor(b / 16)) * 16))];

var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."

document.theClock.timeBox.value = timeValue;
document.bgColor = RGB;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}

function init () {
rinc = 4; ginc = 4; binc = 4;
r = 0; g = 64; b = 128;
rdir = "up"; gdir = "up"; bdir = "up";
rlo = 0; glo = 0; blo = 0; rhi = 255; ghi = 255; bhi = 255;
startclock();
}
</script>


Analizzato l'<head>, necessario inserire gli opportuni richiami all'interno del <body>. Innanzitutto, come attributo del vero e proprio tag <body>, va definito l'evento onload con la funzione init. Ecco come:

<BODY BGCOLOR=#ffffff TEXT=#000080 LINK=#ff0000 onLoad="init()">

Gli altri attributi (bgcolor, text e link) servono a specificare rispettivamente il colore di sfondo, del testo e dei collegamenti ipertestuali.
Come ultima parte di sintassi importante al fine dell'esempio, indispensabile definire il form per la visualizzazione dell'orologio:

<form name="theClock">
<input name="timeBox" size=16>
</form>


© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2000/luglio/47.asp?print=ok