SandySogna: Tutorial orologino javascript

Questo tutorial puo' essere utile, se si desidera realizzare orologini in javascrip come questi:
MIEI OROLOGINI

Apriamo il programma di grafica io uso Psp o Photofiltre studio (nuova immagine trasparente) costruiamoci lo sfondo per contenere il nostro orologino.

Diamogli un effetto rilievo, il colore che vogliamo,insomma usate la fantasia

Fatto questo dobbiamo prima salvare la nostra immagine, poi caricarla su un sito hosting,
apriamo il nostro editor di testo: frontpage o share point. (io uso il secondo ) e inseriamo quest'unico style tra i tag <head> e </head>

CODICE:: <style type="text/css">  </style>

ora carichiamo la nostra immagine ,
cambiamo l'url ottenuto dall'immagine hostata e incolliamolo nell'apposita stringa del codice.
Creiamo un livello dentro la nostra immagine(dentro ci andra'lo script per far funzionare il nostro orologino)

Sarebbe opportuno lavorare in doppia visualizzazione in modo che possiamo vedere anche il codice generato.una volta creato il livello, vedremo nel codice, una barra lampeggiare..li dovremmo incollare questo script.

CODICE:: <script language="JavaScript"> function tS(){ x=new Date(); x.setTime(x.getTime()); return x; } function lZ(x){ return (x>9)?x:'0'+x; } function tH(x){ if(x==0){ x=24; } return (x>24)?x-=24:x; } function dT(){ if(fr==0){ fr=1; document.write('<font size=2 font color=#F75294 face=Times new roman><b><span id="tP">'+eval(oT)+'</b></span></font>'); } tP.innerText=eval(oT); setTimeout('dT()',1000); } var fr=0,oT="lZ(tH(tS().getHours()))+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())"; </script> <script language="JavaScript">dT();</script>

Potrai modificare questa parte cambiando il colore, la grandezza, e il tipo di font

CODICE:: size=2 font color=#F75294 face=Times new roman>

Andando su normale,vedrai il risultato.

Selezioniamo tutto ilcodice, andiamo sul nostro spazio web(io ho altervista) creiamo una nuova pagina vuota e incolliamo il codice.Salva e dalle un Nome es. orologino1
Cliccando sul link che apre questa pagina dovrai prendere l'url

ora torna su frontpage/sharePoint dovrai creare l'i-frame
apri una nuova pagina e inserisci questo codice prima del tag </body>

CODICE:: <iframe name="orologino1" src="http://maizeniamo.altervista.org/orologino/NuovoFile.html" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" width="122" height="187" noresize allowtransparency="true"> </iframe>

Dovrai cambiare l'url ovviamente e metterci il tuo al posto del mio.
modifica se necessario altezza e larghezza cliccando sugli angoli del frame.

copia anche questo codice in una pagina nuova del tuo spazio web, salvandolo con un nome simile :orologino2 o frame ...prova ad aprire questa nuova pagina e guarda il risultato ^^

Tutorial orologino javascript

Nessun commento:

Posta un commento