Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Sfuma il colore di sfondo
Arretrati lista "Una demo Dhtml a settimana"
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>
|
