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:

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:

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

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

Altre modifiche non sono necessarie.

Indice lezioni

Orologio da polso

Ti consigliamo anche

React: un Tic-Tac-Toe (Tris) interattivo in versione Web

Angular: configurazione con Node.js ed Express

Creare un sistema di pagamento con Angular

Creare una Web App con Htmx e Astro DB