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".
|
| |
Sfumature dello sfondo dinamico
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript
COMPATIBILITÀ: Ms Ie
FILES ESTERNI: sfondo.gif
Visualizza la demo
Scarica la demo
Come settimana scorsa (si veda www.risorse.net/dhtml/teoria/2000/ottobre/55.asp), esaminiamo una demo che anima lo sfondo. In questo
caso, il background color iniziale, il blu, viene sfumato ed ogni secondo
che passa, assume una colorazione leggermente diversa, sino ad arrivare ad
una tinta completamente differente.
Per migliorare l'effetto, è presente un orologio che scandisce il passare
dei secondi.
La prima sintassi che si incontra nel codice dell'esempio, è il Javascript
per la gestione del colore e del tempo:
<script Language="JavaScript">
<!-- inizio intestazione per vecchi browsers
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();
}
<!-- fine dell'intestazione per vecchi browsers -->
</SCRIPT>
Quasi tutto il codice qui sopra riportato, serve esclusivamente per cambiare
il colore. Solo 12 righe si riferiscono alla gestione dei secondi: queste,
le evidenziamo di seguito:
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;
Tutto ciò, è caricato nell'<HEAD> del documento. Nel <BODY>, è presente il
richiamo della funzione init() nell'evento onload (al caricamento della
pagina). Inoltre, viene caricato il form per la
visualizzazionedell'orologio:
<BODY BGCOLOR=#ffffff TEXT=#000080 LINK=#ff0000 onLoad="init()">
<CENTER>
<FONT size=5>www.Risorse.net</FONT><br>
<FONT size=7>Sezione Dhtml</FONT><BR>
<HR size=3 WIDTH="300"><BR>
<form name="theClock">
<input name="timeBox" size=16></form>
<FONT size=+1>Un esempio di cambio a tempo del colore dello sfondo,
collegato allo scandire dei secondi del suddetto orologio</FONT><BR>
</BODY>
N.B.: Per la realizzazione dei tuoi siti Web, Risorse.net ti offre una nuova
sezione, ideale soprattutto per i Web designers. Un grande archivio di True
Type Fonts, con articoli ad hoc per la comprensione e l'utilizzo degli
stessi. Clicca qui per visitarla: www.risorse.net/font.
|
