[Code] Horloge Analogique en HTML/Javascript

Marsh Posté le 20-02-2007 à 17:04:00

Je viens de finir une horloge en Javascript/HTML...
Il y a surement des erreurs... Le JS/HTML n'est pas mon domaine de prédilection.
Le code est écrit pour être le plus lisible et compréhensible (pas pour être le plus efficace).

Vous pouvez la voir en activité ici :
Lien supprimé

Et tout télécharger là :
Lien supprimé

Le design de l'horloge est dans l'esprit MacOS.
Lien supprimé

J'utilise en tout 365 images : GIF 8 bits avec transparence et PNG 32bits (24bits+alpha 8bits)
- 2 x 60 images pour les heures (format PNG et GIF) - clock-h00.gif à clock-h59.gif et clock-h00.png à clock-h59.png
- 2 x 60 images pour les minutes (format PNG et GIF) - clock-m00.gif à clock-m59.gif et clock-m00.png à clock-m59.png
- 2 x 60 images pour les secondes (format PNG et GIF) - clock-s00.gif à clock-s59.gif et clock-s00.png à clock-s59.png
- 2 x 2 images pour le fond (format PNG et GIF) - clock-am.gif, clock-pm.gif, clock-am.png, clock-pm.png
- 1 image de fond transparent (format GIF) - clock-blank.gif
Total : 49Ko pour les GIF et 209Ko pour les PNG

Elle a été testée sous Firefox 2.0, Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6 et Safari (version MacOS 10.4).

Spécificité :
- Sa taille est fixée à 96x96
- Par défaut, on utilise le format PNG sauf lorsqu'Internet Explorer est détecté en version 5.0 ou antérieure, dans ce cas, le GIF est utilisé.
- La transparence des PNG est forcée en mode Internet Explorer 5.5 et 6.0.
- Toutes les images sont préchargées simultanément.

Petits soucis :
- L'alignement du centre des aiguilles est assez moyen...
- Il faudrait alléger le code et incorporer le preload dans l'affichage

Le code

Code :

<html><head>
<script><!--
var ClientPC = navigator.userAgent.toLowerCase();
var ClientVer = parseInt(navigator.appVersion);
var arVersion = navigator.appVersion.split("MSIE" );
var MsIeVer = parseFloat(arVersion[1]);
var Is_ie = ( (ClientPC.indexOf('msie') != -1) && (ClientPC.indexOf('opera') == -1));
var Is_nav = ( (ClientPC.indexOf('mozilla') != -1) && (ClientPC.indexOf('spoofer') == -1)
&& (ClientPC.indexOf('compatible') == -1) && (ClientPC.indexOf('opera') == -1)
&& (ClientPC.indexOf('webtv') == -1) && (ClientPC.indexOf('hotjava') == -1));
var Is_moz = 0;
var Is_win = ((ClientPC.indexOf('win')!=-1) || (ClientPC.indexOf('16bit') != -1));
var Is_mac = (ClientPC.indexOf('mac')!=-1);
var iClockProcessIEbugfixPNG;
var iClockProcessInit = 0;
var szClockProcessImageExtension;
var iClockProcessCurrentH = -1;
var iClockProcessCurrentM = -1;
var iClockProcessCurrentS = -1;
var iClockProcessCurrentD = -1;
var iClockPreloadCount = 0;
imgClockProcessH = new Array ( );
initClockProcessH = new Array ( );
imgClockProcessM = new Array ( );
initClockProcessM = new Array ( );
imgClockProcessS = new Array ( );
initClockProcessS = new Array ( );
szClockProcessH = new Array ( );
szClockProcessM = new Array ( );
szClockProcessS = new Array ( );
if (Is_ie)
{
if ((MsIeVer>=5.5) && (MsIeVer<7.0))
{
szClockProcessImageExtension = '.png';
iClockProcessIEbugfixPNG = 1;
}
else if (MsIeVer>=7)
{
szClockProcessImageExtension = '.png';
iClockProcessIEbugfixPNG = 0;
}
else
{
szClockProcessImageExtension = '.gif';
iClockProcessIEbugfixPNG = 0;
}
}
else
{
szClockProcessImageExtension = '.png';
iClockProcessIEbugfixPNG = 0;
}
function jsClockPreloadPrepare ( )
{
var i;
for (i=0;i<60;i++)
{
if (i<10) sIndex = '0'+i;
else sIndex = i;
szClockProcessH[i] = 'clock-h'+sIndex+szClockProcessImageExtension;
szClockProcessM[i] = 'clock-m'+sIndex+szClockProcessImageExtension;
szClockProcessS[i] = 'clock-s'+sIndex+szClockProcessImageExtension;
}
window.setTimeout ( "jsClockPreloadProcess()", 100 );
window.setInterval ( "jsClockProcess()", 1000 );
}
function jsClockPreloadApply ( iHMS, iIndex )
{
switch (iHMS)
{
case 0:
if (initClockProcessH[iIndex]!=1)
{
initClockProcessH[iIndex] = 1;
imgClockProcessH[iIndex] = new Image ( );
imgClockProcessH[iIndex].src = szClockProcessH[iIndex];
}
break;
case 1:
if (initClockProcessM[iIndex]!=1)
{
initClockProcessM[iIndex] = 1;
imgClockProcessM[iIndex] = new Image ( );
imgClockProcessM[iIndex].src = szClockProcessM[iIndex];
}
break;
case 2:
if (initClockProcessS[iIndex]!=1)
{
initClockProcessS[iIndex] = 1;
imgClockProcessS[iIndex] = new Image ( );
imgClockProcessS[iIndex].src = szClockProcessS[iIndex];
}
break;
}
}
function jsClockPreloadProcess ( )
{
if (iClockPreloadCount<180)
{
jsClockPreloadApply ( iClockPreloadCount%3, parseInt(iClockPreloadCount/3) );
iClockPreloadCount++;
window.setTimeout ( "jsClockPreloadProcess()", 100 );
}
}
function jsClockProcess ( )
{
tCurrentTime = new Date ( );
iH = tCurrentTime.getHours();
iM = tCurrentTime.getMinutes();
iS = tCurrentTime.getSeconds();
if (iH>=12) iD = 'pm';
else iD = 'am';
iH = parseInt(((iH%12)*5)+(iM/12));
for(var i=0; i<document.images.length; i++)
{
var nodeImg = document.images[i];
var szSrc = '';
switch (nodeImg.id)
{
case 'clock-h-img':
if (iClockProcessCurrentH!=iH) szSrc = szClockProcessH[iH];
break;
case 'clock-m-img':
if (iClockProcessCurrentM!=iM) szSrc = szClockProcessM[iM];;
break;
case 'clock-s-img':
if (iClockProcessCurrentS!=iS) szSrc = szClockProcessS[iS];
break;
case 'clock-back-img':
if (iClockProcessCurrentD!=iD)
szSrc = 'clock-'+iD+szClockProcessImageExtension;
break;
default:
break;
}
if (szSrc!='')
{
if (iClockProcessIEbugfixPNG)
{
nodeImg.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\"' +
szSrc + '\",sizingMethod=\"scale\" )';
}
else nodeImg.src = szSrc;
}
}
iClockProcessCurrentH = iH;
iClockProcessCurrentM = iM;
iClockProcessCurrentS = iS;
iClockProcessCurrentD = iD;
}
--></script>
</head><body bgcolor=#ffffff>
<div id='clock' style='position:relative;'>
<img src='clock-blank.gif' id ='clock-back-img' width='96px' height='96px' style='position:absolute; left:0px; top:0px; z-index:2;'>
<div id='clock-h'><img src='clock-blank.gif' id='clock-h-img' width='96px' height='96px' style='position:absolute; left:0px; top:-2px; z-index:3;'></div>
<div id='clock-m'><img src='clock-blank.gif' id='clock-m-img' width='96px' height='96px' style='position:absolute; left:0px; top:-2px; z-index:4;'></div>
<div id='clock-s'><img src='clock-blank.gif' id='clock-s-img' width='96px' height='96px' style='position:absolute; left:1px; top:-2px; z-index:5;'></div>
</div>
<script>
jsClockPreloadPrepare ( );
</script>
</body></html>

Message cité 1 fois
Message édité par christophe_d13 le 05-06-2009 à 17:32:04

---------------
http://www.ikalizer.fr

Reply

Marsh Posté le 20-02-2007 à 17:04:00

Reply

Marsh Posté le 09-05-2007 à 21:34:26

Merci pour ce script.<br />
Je l'utilise sur mon site.
Vous pouvez le voir ici www.fcbat.com

Reply

Marsh Posté le 03-08-2007 à 16:15:38

J'ai mis à jour le texte et il est maintenant possible de tout télécharger dans un fichier zip.
Lien supprimé

Message édité par christophe_d13 le 08-06-2009 à 00:11:24

---------------
http://www.ikalizer.fr

Reply

Marsh Posté le 03-08-2007 à 16:39:49

Salut,

J'ai essayé hier d'afficher un png24 sous ie6, mais finalement j'ai laissé tomber et j'ai utilisé un gif.
Tu saurais me faire un exemple hyper simple d'affichage de png sous ie 6 qui marche que je puisse recopier? J'ai peur de pas savoir prendre que les parties utiles de ton code... Un énorme merci si tu pouvais m'aider.

Reply

Marsh Posté le 04-08-2007 à 23:00:35

Durkheim> C'est assez simple en fait...

Si le navigateur est IE 5.5 ou IE 6, il faut récupérer l'élément image, ici nodeImg, coller le nom de l'image dans szSrc et appliquer la ligne suivante :

var nodeImg = document.images[...Le numéro de l'image dans le document...];
var szSrc = '...Le nom du fichier image au format PNG...';

nodeImg.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\"' + szSrc + '\",sizingMethod=\"scale\" )';

Message édité par christophe_d13 le 04-08-2007 à 23:01:02

---------------
http://www.ikalizer.fr

Reply

Marsh Posté le 05-08-2007 à 14:18:01

Merci beaucoup!

Reply

Marsh Posté le 05-08-2007 à 22:44:35

Je me demandais pkoi ça mettait autant de temps à charger au début

Forcément, avec 365 images

En tout cas, pas mal :jap:

Y'a juste que je sais pas si c'est IE 7 ou quoi, mais les aiguilles sont décallées par rapport au centre de l'horloge et même entre elles

Reply

Marsh Posté le 05-08-2007 à 22:53:03

Apparement, c'est pas IE7, parceque j'ai pareil avec FF sous Debian et IE6SP1 sous 98

Quoique sous IE6SP1 ça semble un peu moins décallé.

Reply

Marsh Posté le 06-08-2007 à 21:41:36

MagicBuzz> Faut pas lire une ligne sur deux, c'est pas bien, pas glop !

Citation :

Petits soucis :
- L'alignement du centre des aiguilles est assez moyen...

C'est les images qui ne sont pas assez travaillées...

Message édité par christophe_d13 le 06-08-2007 à 21:42:06

---------------
http://www.ikalizer.fr

Reply

Marsh Posté le 07-08-2007 à 15:47:13

ouais c'est vrai ça gache un peu le design.

mais sinon je trouve qu'elle est pas si mal cette horloge..

---------------
http://ranjoy.free.fr

Reply

Marsh Posté le 07-08-2007 à 15:47:13

Reply

Marsh Posté le 11-08-2007 à 18:41:24

christophe_d13 a écrit :

J'utilise en tout 365 images : GIF 8 bits avec transparence et PNG 32bits (24bits+alpha 8bits)

ou comment flinguer le serveur ...

et niveau code, il y a moyen de faire beaucoup mieux !!
allez, cadeau : http://kangol.prout.be/tests/jsclock/

Reply

Marsh Posté le 13-08-2007 à 10:22:33

KangOl> C'est pas encore terminé (il manque la gestion de la transparence). Mais c'est surement mieux que charger progressivement les images.
En fait, je ne savais pas que l'on pouvait utiliser ce genre de technique en JS (le position X/Y dans l'image comme un bitblt). Mais est-ce que cela fonctionne sur tous les navigateurs ? IE5, IE5.5, IE6, IE7, FireFox, Opera, Mozilla...

Message cité 1 fois

---------------
http://www.ikalizer.fr

Reply

Marsh Posté le 13-08-2007 à 10:25:49

christophe_d13 a écrit :

KangOl> C'est pas encore terminé (il manque la gestion de la transparence). Mais c'est surement mieux que charger progressivement les images.
En fait, je ne savais pas que l'on pouvait utiliser ce genre de technique en JS (le position X/Y dans l'image comme un bitblt). Mais est-ce que cela fonctionne sur tous les navigateurs ? IE5, IE5.5, IE6, IE7, FireFox, Opera, Mozilla...

En tout cas ça ne passe pas sous IE6

Reply

Marsh Posté le 13-08-2007 à 18:29:35

vu que ce sont des png, ca ne m'étonne pas...

et puis IE < 6, je pense qu'on peut les oublier

Reply

Marsh Posté le 13-08-2007 à 21:49:27

KangOl> Le but de cet horloge, lorsque je l'avais développé était de fonctionner à partir d'IE5, de Safari (celle avec les G4), de Firefox, de mozilla et d'opéra.
Il fallait du code compatible.

---------------
http://www.ikalizer.fr

Reply

Marsh Posté le 13-08-2007 à 22:04:05

d'un autre coté, vu le code, ca devrais marcher sous tous les navigateurs avec des .gif ...

Reply

Marsh Posté le 14-08-2007 à 10:11:21

Je testerai ça à la rentrée.
Merci.

---------------
http://www.ikalizer.fr

Reply

[Code] Horloge Analogique en HTML/Javascript

Sujets relatifs:

Leave a Replay