Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1378 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Code] Horloge Analogique en HTML/Javascript

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Code] Horloge Analogique en HTML/Javascript

n°1517149
christophe​_d13
L'efficacité à tout prix.
Posté le 20-02-2007 à 17:04:00  profilanswer
 

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 :
  1. <html><head>
  2. <script><!--
  4. var ClientPC    = navigator.userAgent.toLowerCase();
  5. var ClientVer   = parseInt(navigator.appVersion);
  6. var arVersion   = navigator.appVersion.split("MSIE" );
  7. var MsIeVer     = parseFloat(arVersion[1]);
  9. var Is_ie       = ( (ClientPC.indexOf('msie')       != -1) && (ClientPC.indexOf('opera')    == -1));
  10. var Is_nav      = ( (ClientPC.indexOf('mozilla')    != -1) && (ClientPC.indexOf('spoofer')  == -1)
  11.                  && (ClientPC.indexOf('compatible') == -1) && (ClientPC.indexOf('opera')    == -1)
  12.                  && (ClientPC.indexOf('webtv')      == -1) && (ClientPC.indexOf('hotjava')  == -1));
  13. var Is_moz      = 0;
  14. var Is_win = ((ClientPC.indexOf('win')!=-1) || (ClientPC.indexOf('16bit') != -1));
  15. var Is_mac =  (ClientPC.indexOf('mac')!=-1);
  18. var iClockProcessIEbugfixPNG;
  19. var iClockProcessInit = 0;
  20. var szClockProcessImageExtension;
  22. var iClockProcessCurrentH = -1;
  23. var iClockProcessCurrentM = -1;
  24. var iClockProcessCurrentS = -1;
  25. var iClockProcessCurrentD = -1;
  26. var iClockPreloadCount = 0;
  28. imgClockProcessH = new Array ( );
  29. initClockProcessH = new Array ( );
  30. imgClockProcessM = new Array ( );
  31. initClockProcessM = new Array ( );
  32. imgClockProcessS = new Array ( );
  33. initClockProcessS = new Array ( );
  34. szClockProcessH = new Array ( );
  35. szClockProcessM = new Array ( );
  36. szClockProcessS = new Array ( );
  39. if (Is_ie)
  40. {
  41. if ((MsIeVer>=5.5) && (MsIeVer<7.0))
  42. {
  43.  szClockProcessImageExtension = '.png';
  44.  iClockProcessIEbugfixPNG = 1;
  45. }
  46. else if (MsIeVer>=7)
  47. {
  48.  szClockProcessImageExtension = '.png';
  49.  iClockProcessIEbugfixPNG = 0;
  50. }
  51. else
  52. {
  53.  szClockProcessImageExtension = '.gif';
  54.  iClockProcessIEbugfixPNG = 0;
  55. }
  56. }
  57. else
  58. {
  59. szClockProcessImageExtension = '.png';
  60. iClockProcessIEbugfixPNG = 0;
  61. }
  63. function jsClockPreloadPrepare ( )
  64. {
  65. var i;
  66. for (i=0;i<60;i++)
  67. {
  68.  if (i<10) sIndex = '0'+i;
  69.  else      sIndex = i;
  71.  szClockProcessH[i] = 'clock-h'+sIndex+szClockProcessImageExtension;
  72.  szClockProcessM[i] = 'clock-m'+sIndex+szClockProcessImageExtension;
  73.  szClockProcessS[i] = 'clock-s'+sIndex+szClockProcessImageExtension;
  74. }
  76. window.setTimeout ( "jsClockPreloadProcess()", 100 );
  77. window.setInterval ( "jsClockProcess()", 1000 );
  78. }
  80. function jsClockPreloadApply ( iHMS, iIndex )
  81. {
  82. switch (iHMS)
  83. {
  84.  case 0:
  85.   if (initClockProcessH[iIndex]!=1)
  86.   {
  87.    initClockProcessH[iIndex] = 1;
  88.    imgClockProcessH[iIndex] = new Image ( );
  89.    imgClockProcessH[iIndex].src = szClockProcessH[iIndex];
  90.   }
  91.   break;
  93.  case 1:
  94.   if (initClockProcessM[iIndex]!=1)
  95.   {
  96.    initClockProcessM[iIndex] = 1;
  97.    imgClockProcessM[iIndex] = new Image ( );
  98.    imgClockProcessM[iIndex].src = szClockProcessM[iIndex];
  99.   }
  100.   break;
  102.  case 2:
  103.   if (initClockProcessS[iIndex]!=1)
  104.   {
  105.    initClockProcessS[iIndex] = 1;
  106.    imgClockProcessS[iIndex] = new Image ( );
  107.    imgClockProcessS[iIndex].src = szClockProcessS[iIndex];
  108.   }
  109.   break;
  110. }
  111. }
  114. function jsClockPreloadProcess ( )
  115. {
  116. if (iClockPreloadCount<180)
  117. {
  118.  jsClockPreloadApply ( iClockPreloadCount%3, parseInt(iClockPreloadCount/3) );
  119.  iClockPreloadCount++;
  121.  window.setTimeout ( "jsClockPreloadProcess()", 100 );
  122. }
  123. }
  125. function jsClockProcess ( )
  126. {
  127. tCurrentTime = new Date ( );
  128. iH = tCurrentTime.getHours();
  129. iM = tCurrentTime.getMinutes();
  130. iS = tCurrentTime.getSeconds();
  132. if (iH>=12) iD = 'pm';
  133. else        iD = 'am';
  134. iH = parseInt(((iH%12)*5)+(iM/12));
  136.     for(var i=0; i<document.images.length; i++)
  137.     {
  138.       var nodeImg = document.images[i];
  139.  var szSrc = '';
  141.  switch (nodeImg.id)
  142.  {
  143.   case 'clock-h-img':
  144.    if (iClockProcessCurrentH!=iH) szSrc = szClockProcessH[iH];
  145.    break;
  147.   case 'clock-m-img':
  148.    if (iClockProcessCurrentM!=iM) szSrc = szClockProcessM[iM];;
  149.    break;
  151.   case 'clock-s-img':
  152.    if (iClockProcessCurrentS!=iS) szSrc = szClockProcessS[iS];
  153.    break;
  155.   case 'clock-back-img':
  156.    if (iClockProcessCurrentD!=iD)
  157.     szSrc = 'clock-'+iD+szClockProcessImageExtension;
  158.    break;
  160.   default:
  161.    break;
  162.  }
  164.  if (szSrc!='')
  165.  {
  166.   if (iClockProcessIEbugfixPNG)
  167.   {
  168.    nodeImg.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\"' +
  169.                                        szSrc + '\",sizingMethod=\"scale\" )';
  170.   }
  171.   else nodeImg.src = szSrc;
  172.  }
  173. }
  175. iClockProcessCurrentH = iH;
  176. iClockProcessCurrentM = iM;
  177. iClockProcessCurrentS = iS;
  178. iClockProcessCurrentD = iD;
  179. }
  181. --></script>
  183. </head><body bgcolor=#ffffff>
  184. <div id='clock' style='position:relative;'>
  185. <img src='clock-blank.gif' id ='clock-back-img' width='96px' height='96px' style='position:absolute; left:0px; top:0px; z-index:2;'>
  186. <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>
  187. <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>
  188. <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>
  189. </div>
  192. <script>
  193. jsClockPreloadPrepare ( );
  194. </script>
  196. </body></html>

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

---------------
http://www.ikalizer.fr
mood
Publicité
Posté le 20-02-2007 à 17:04:00  profilanswer
 

n°1557646
fred65200
Posté le 09-05-2007 à 21:34:26  profilanswer
 

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

n°1595613
christophe​_d13
L'efficacité à tout prix.
Posté le 03-08-2007 à 16:15:38  profilanswer
 

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
n°1595656
durkheim
Posté le 03-08-2007 à 16:39:49  profilanswer
 

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.

n°1595895
christophe​_d13
L'efficacité à tout prix.
Posté le 04-08-2007 à 23:00:35  profilanswer
 

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
n°1595954
durkheim
Posté le 05-08-2007 à 14:18:01  profilanswer
 

Merci beaucoup!

n°1596005
MagicBuzz
Posté le 05-08-2007 à 22:44:35  profilanswer
 

Je me demandais pkoi ça mettait autant de temps à charger au début :D
 
Forcément, avec 365 images :D
 
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 :D

n°1596006
MagicBuzz
Posté le 05-08-2007 à 22:53:03  profilanswer
 

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é.

n°1596429
christophe​_d13
L'efficacité à tout prix.
Posté le 06-08-2007 à 21:41:36  profilanswer
 

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
n°1596745
Prout33
Posté le 07-08-2007 à 15:47:13  profilanswer
 

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
mood
Publicité
Posté le 07-08-2007 à 15:47:13  profilanswer
 

n°1598638
KangOl
Profil : pointeur
Posté le 11-08-2007 à 18:41:24  profilanswer
 

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/

n°1598823
christophe​_d13
L'efficacité à tout prix.
Posté le 13-08-2007 à 10:22:33  profilanswer
 

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
n°1598827
LePhasme
Les Belges domineront le monde
Posté le 13-08-2007 à 10:25:49  profilanswer
 

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

n°1599127
KangOl
Profil : pointeur
Posté le 13-08-2007 à 18:29:35  profilanswer
 

vu que ce sont des png, ca ne m'étonne pas...
 
et puis IE < 6, je pense qu'on peut les oublier :o

n°1599172
christophe​_d13
L'efficacité à tout prix.
Posté le 13-08-2007 à 21:49:27  profilanswer
 

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
n°1599180
KangOl
Profil : pointeur
Posté le 13-08-2007 à 22:04:05  profilanswer
 

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

n°1599286
christophe​_d13
L'efficacité à tout prix.
Posté le 14-08-2007 à 10:11:21  profilanswer
 

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


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Code] Horloge Analogique en HTML/Javascript

 

Sujets relatifs
Requête sql + javascript[javascript] parent.location fonctionne pas bien
comment recuperer et traiter des données d'un formulaire html?[HTML]Création d'un site par un noob
User Javascript et CSSGoogle Map + Ancre html
[html] mailto + modification adresse mail [Résolu]javascript : recherche de script (urgent)
Pb javascript focus() sur un element en display:noneproblème d'alignement menu/page(html)
Plus de sujets relatifs à : [Code] Horloge Analogique en HTML/Javascript

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.115 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR