Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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>
 

 
 
Home > dhtml > teoria > 2000 > luglio > ...   © 1999-2017 Risorse.net, tutti i diritti riservati