Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Orologio da polso

Link copiato negli appunti

Lo script che presentiamo carica dinamicamente le immagini nell'interfaccia di un orologio da polso Casio, come se l'orologio digitale stesse davvero camminando.
Il codice è molto semplice da configurare e non richiede perticolari modifiche. È compatibile con tutti i principali browser in circolazione.

  • esempio.htm
  • cartella images

Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.

Inseriamo il seguente codice JavaScript tra i tag <head> della pagina:

<script type="text/javascript" language="javascript">
<!--
var _P="images/";

function preloadImage(fnImg)
{
// crea array per il preload delle immagini se non sono state create:
if (!document.preloadedImages)
document.preloadedImages = new Array();
// crea una nuova immagine:
document.preloadedImages[fnImg] = new Image();
document.preloadedImages[fnImg].src = _P+fnImg;
}

function imgSwitch(imgId, fnImgNew)
{
// cambia immagine:
if (document.preloadedImages && document.preloadedImages[fnImgNew])
document.images[imgId].src = document.preloadedImages[fnImgNew].src;
else
document.images[imgId].src = _P+fnImgNew;
}

function imgMouseOver(imgId, fnImgOver)
{
// ricorda l'immagine originale:
document.images[imgId].originalSrc = document.images[imgId].src;
// cambia l'immagine al mouseover:
imgSwitch(imgId, fnImgOver);
}

function imgMouseOut(imgId)
{
// ritorna all'immagine originale:
if (document.images[imgId] && document.images[imgId].originalSrc)
document.images[imgId].src = document[imgId].originalSrc;
}

var timerID, now;

// Queste variabili memorizzeranno le cifre delle date attualmente visualizzate.
// Sono inizializzate a to -1 per assicurare che tutte le cifre vengano
aggiornate
// al primo richiamo della funzione showTime:
var year10 = -1;
var year1 = -1;
var month10 = -1;
var month1 = -1;
var date10 = -1;
var date1 = -1;
var day = -1;
var hours10 = -1;
var hours1 = -1;
var minutes10 = -1;
var minutes1 = -1;
var seconds10 = -1;
var seconds1 = -1;

// aggiorna il display dell'orologio:
function showTime()
{
// prende le cifre nella data:
var now = new Date();
var newYear = now.getYear();
newYear = newYear % 100;
var newYear10 = Math.floor(newYear / 10);
var newYear1 = newYear - (newYear10 * 10);
var newMonth = now.getMonth();
newMonth++;
var newMonth10 = Math.floor(newMonth / 10);
var newMonth1 = newMonth - (newMonth10 * 10);
var newDate = now.getdate();
var newDate10 = Math.floor(newDate / 10);
var newDate1 = newDate - (newDate10 * 10);
var newDay = now.getday();
var newHours = now.getHours();
var newHours10 = Math.floor(newHours / 10);
var newHours1 = newHours - (newHours10 * 10);
var newMinutes = now.getMinutes();
var newMinutes10 = Math.floor(newMinutes / 10);
var newMinutes1 = newMinutes - (newMinutes10 * 10);
var newSeconds = now.getSeconds();
var newSeconds10 = Math.floor(newSeconds / 10);
var newSeconds1 = newSeconds - (newSeconds10 * 10);

// cambia le immagini solamente se le cifre della data sono cambiate:
if (newYear10 != year10)
{
imgSwitch("year10", "tinydigit" + newYear10 + ".gif");
year10 = newYear10;
}
if (newYear1 != year1)
{
imgSwitch("year1", "tinydigit" + newYear1 + ".gif");
year1 = newYear1;
}
if (newMonth10 != month10)
{
if (newMonth10 == 0)
imgSwitch("month10", "tinyblank.gif");
else
imgSwitch("month10", "tinydigit" + newMonth10 + ".gif");
month10 = newMonth10;
}
if (newMonth1 != month1)
{
imgSwitch("month1", "tinydigit" + newMonth1 + ".gif");
month1 = newMonth1;
}
if (newDate10 != date10)
{
imgSwitch("date10", "tinydigit" + newDate10 + ".gif");
date10 = newDate10;
}
if (newDate1 != date1)
{
imgSwitch("date1", "tinydigit" + newDate1 + ".gif");
date1 = newDate1;
}
if (newDay != day)
{
imgSwitch("day", "day" + newDay + ".gif");
day = newDay;
}
if (newHours10 != hours10)
{
imgSwitch("hours10", "digit" + newHours10 + ".gif");
hours10 = newHours10;
}
if (newHours1 != hours1)
{
imgSwitch("hours1", "digit" + newHours1 + ".gif");
hours1 = newHours1;
}
if (newMinutes10 != minutes10)
{
imgSwitch("minutes10", "digit" + newMinutes10 + ".gif");
minutes10 = newMinutes10;
}
if (newMinutes1 != minutes1)
{
imgSwitch("minutes1", "digit" + newMinutes1 + ".gif");
minutes1 = newMinutes1;
}
if (newSeconds10 != seconds10)
{
imgSwitch("seconds10", "smalldigit" + newSeconds10 + ".gif");
seconds10 = newSeconds10;
}
imgSwitch("seconds1", "smalldigit" + newSeconds1 + ".gif");

// aggiorna l'orologio ogni secondo:
timerID = setTimeout("showTime()", 1000);
}

function preloadImages()
{
for (var i = 0; i <= 9; i++)
{
preloadImage("digit" + i + ".gif");
preloadImage("smalldigit" + i + ".gif");
preloadImage("tinydigit" + i + ".gif");
}
for (i = 0; i <= 6; i++)
preloadImage("day" + i + ".gif");
}

// -->
</script>

Questo codice richiede la personalizzazione solamente di una variabile:

var _P="images/";

indica il percorso dove sono contenute le immagini.

A questo punto andiamo a modificare il tag body richiamando le funzioni di inizializzazione:

<body onload="preloadImages(); showTime();">

Inseriamo quindi il seguente codice HTML all'interno dei tag <body> della pagina:

<table width=300 border="0" cellpadding=0 cellspacing=0>
<tr>
<td> <img src="images/spacer.gif" width=100
height=1/></td>
<td> <img src="images/spacer.gif" width=1 height=1/></td>
<td> <img src="images/spacer.gif" width=14 height=1/></td>
<td> <img src="images/spacer.gif" width=15 height=1/></td>
<td> <img src="images/spacer.gif" width=6 height=1/></td>
<td> <img src="images/spacer.gif" width=3 height=1/></td>
<td> <img src="images/spacer.gif" width=2 height=1/></td>
<td> <img src="images/spacer.gif" width=10 height=1/></td>
<td> <img src="images/spacer.gif" width=1 height=1/></td>
<td> <img src="images/spacer.gif" width=11 height=1/></td>
<td> <img src="images/spacer.gif" width=3 height=1/></td>
<td> <img src="images/spacer.gif" width=2 height=1/></td>
<td> <img src="images/spacer.gif" width=1 height=1/></td>
<td> <img src="images/spacer.gif" width=5 height=1/></td>
<td> <img src="images/spacer.gif" width=5 height=1/></td>
<td> <img src="images/spacer.gif" width=1 height=1/></td>
<td> <img src="images/spacer.gif" width=5 height=1/></td>
<td> <img src="images/spacer.gif" width=5 height=1/></td>
<td> <img src="images/spacer.gif" width=1 height=1/></td>
<td> <img src="images/spacer.gif" width=109
height=1/></td>
<td></td>
</tr>
<tr>
<td colspan=20> <img src="images/watch2_01.gif" width=300
height=161/></td>
<td> <img src="images/spacer.gif" width=1
height=161/></td>
</tr>
<tr>
<td colspan=10> <img src="images/watch2_02.gif" width=163
height=14/></td>
<td colspan=4> <img name='year10' src="images/watch2_03.gif"
width=11 height=14/></td>
<td colspan=3> <img name='year1' src="images/watch2_04.gif"
width=11 height=14/></td>
<td colspan=3> <img src="images/watch2_05.gif" width=115
height=14/></td>
<td> <img src="images/spacer.gif" width=1 height=14/></td>
</tr>
<tr>
<td colspan=2 rowspan=3> <img src="images/watch2_06.gif" width=101
height=16/></td>
<td colspan=4> <img name='day' src="images/watch2_07.gif" width=38
height=13/></td>
<td rowspan=3> <img src="images/watch2_08.gif" width=2
height=16/></td>
<td colspan=2 rowspan=2> <img name='month10'
src="images/watch2_09.gif" width=11 height=14/></td>
<td rowspan=2> <img name='month1' src="images/watch2_10.gif"
width=11 height=14/></td>
<td colspan=3 rowspan=3> <img src="images/watch2_11.gif" width=6
height=16/></td>
<td colspan=3 rowspan=2> <img name='date10'
src="images/watch2_12.gif" width=11 height=14/></td>
<td colspan=3 rowspan=2> <img name='date1'
src="images/watch2_13.gif" width=11 height=14/></td>
<td rowspan=7> <img src="images/watch2_14.gif" width=109
height=187/></td>
<td> <img src="images/spacer.gif" width=1 height=13/></td>
</tr>
<tr>
<td colspan=4 rowspan=2> <img src="images/watch2_15.gif" width=38
height=3/></td>
<td> <img src="images/spacer.gif" width=1 height=1/></td>
</tr>
<tr>
<td colspan=3> <img src="images/watch2_16.gif" width=22
height=2/></td>
<td colspan=6 rowspan=2> <img src="images/watch2_17.gif" width=22
height=3/></td>
<td> <img src="images/spacer.gif" width=1 height=2/></td>
</tr>
<tr>
<td rowspan=4> <img src="images/watch2_18.gif" width=100
height=171/></td>
<td colspan=2 rowspan=3> <img name='hours10'
src="images/watch2_19.gif" width=15 height=23/></td>
<td rowspan=3> <img name='hours1' src="images/watch2_20.gif"
width=15 height=23/></td>
<td rowspan=3> <img src="images/watch2_21.gif" width=6
height=23/></td>
<td colspan=3 rowspan=3> <img name='minutes10'
src="images/watch2_22.gif" width=15 height=23/></td>
<td colspan=3 rowspan=3> <img name='minutes1'
src="images/watch2_23.gif" width=15 height=23/></td>
<td colspan=2> <img src="images/watch2_24.gif" width=3
height=1/></td>
<td> <img src="images/spacer.gif" width=1 height=1/></td>
</tr>
<tr>
<td rowspan=3> <img src="images/watch2_25.gif" width=2
height=170/></td>
<td colspan=3> <img name='seconds10' src="images/watch2_26.gif"
width=11 height=17/></td>
<td colspan=3> <img name='seconds1' src="images/watch2_27.gif"
width=11 height=17/></td>
<td rowspan=3> <img src="images/watch2_28.gif" width=1
height=170/></td>
<td> <img src="images/spacer.gif" width=1 height=17/></td>
</tr>
<tr>
<td colspan=6 rowspan=2> <img src="images/watch2_29.gif" width=22
height=153/></td>
<td> <img src="images/spacer.gif" width=1 height=5/></td>
</tr>
<tr>
<td colspan=10> <img src="images/watch2_30.gif" width=66
height=148/></td>
<td> <img src="images/spacer.gif" width=1
height=148/></td>
</tr>
</table>

Ogni immagine, in questo caso, dovrà essere richiamata con il percorso completo e corretto.

Altre modifiche non sono necessarie.


Ti consigliamo anche