Aujourd\u2019hui, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 la version gloubi d\u2019un script que j\u2019ai \u00e9galement d\u00e9j\u00e0 cr\u00e9\u00e9 de mon c\u00f4t\u00e9 : l\u2019horloge illustr\u00e9e.<\/p>\n\n\n\n
La version gloubi est visible ici<\/a>, tandis que la cr\u00e9ation de ma propre version, faite avec jQuery, est pr\u00e9sent\u00e9e ici<\/a>.<\/p>\n\n\n\n Pour commencer, on cr\u00e9\u00e9 10 objets de type Vient ensuite la fonction La derni\u00e8re fonction, Premi\u00e8re diff\u00e9rence par rapport \u00e0 ma premi\u00e8re version, le HTML utilis\u00e9 pour afficher les nombres ainsi que les sous-titres. Chaque colonne est une div contenant 2 images ainsi qu\u2019une autre div pour le sous-titre. Ces trois div sont contenu dans une div englobante.<\/p>\n\n\n Cette div englobante est mise en affichage flexbox, et les div de sous-titre centrent leur texte.<\/p>\n\n\n Concernant le JS, j\u2019ai d\u00e9cid\u00e9 d\u2019un peu optimiser le code pr\u00e9sent\u00e9 sur gloubi web. En effet, dans ce code, pour chacune des composantes (heures, minutes, secondes) on fait exactement les m\u00eames op\u00e9rations, les seules diff\u00e9rences \u00e9tant la valeur utilis\u00e9e et les images \u00e0 modifier.<\/p>\n\n\n\n Mon nouveau code se pr\u00e9sente sous la forme d\u2019une unique fonction displayTime().<\/p>\n\n\n\n Premi\u00e8re \u00e9tape, on stocke l\u2019heure dans une constante.<\/p>\n\n\n Ensuite, je cr\u00e9\u00e9 un tableau d\u2019objets pour les composantes de l\u2019heure. Chacun de ces objets a 3 propri\u00e9t\u00e9s : une valeur ( On parcours ce tableau, et pour chacune de ses entr\u00e9es, on d\u00e9termine l\u2019image \u00e0 utiliser pour les dizaines et unit\u00e9s. Pour les dizaines, si la valeur est inf\u00e9rieur ou \u00e9gale \u00e0 9, on affiche directement le z\u00e9ro, sinon on utilise le r\u00e9sultat arrondi vers le bas de la division par 10 de la valeur. Pour les unit\u00e9s, on utilise le reste (modulo) de la division par 10 de la valeur.<\/p>\n\n\n La fonction s\u2019appelle ensuite r\u00e9cursivement apr\u00e8s un timeout de 1 seconde.<\/p>\n\n\n Le premier appel de cette fonction est assur\u00e9 par l\u2019\u00e9v\u00e9nement load de la fen\u00eatre.<\/p>\n\n\n Et voil\u00e0. Vous avez tout ce qu’il vous faut pour cr\u00e9er l’horloge illustr\u00e9e de vos r\u00eaves.<\/p>\n\n\n\n La version finale est visible sur cette page<\/a>.<\/p>\n\n\n\n \u00c0 bient\u00f4t pour d’autres articles \u00e0 haute teneur informative \ud83d\udc4b<\/p>\n","protected":false},"excerpt":{"rendered":" Aujourd\u2019hui, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 la version gloubi d\u2019un script que j\u2019ai \u00e9galement d\u00e9j\u00e0 cr\u00e9\u00e9 de mon c\u00f4t\u00e9 : l\u2019horloge illustr\u00e9e. La version gloubi est visible ici, tandis que la cr\u00e9ation de ma propre version, faite avec jQuery, est pr\u00e9sent\u00e9e … Continuer la lecture Pr\u00e9sentation de la version gloubi<\/h2>\n\n\n\n
Image()<\/a> <\/code>en leur attribuant \u00e0 chacun l\u2019attribut src correspondant.<\/p>\n\n\n\nc1=new Image(); c1.src="c1.gif";\nc2=new Image(); c2.src="c2.gif";\nc3=new Image(); c3.src="c3.gif";\nc4=new Image(); c4.src="c4.gif";\nc5=new Image(); c5.src="c5.gif";\nc6=new Image(); c6.src="c6.gif";\nc7=new Image(); c7.src="c7.gif";\nc8=new Image(); c8.src="c8.gif";\nc9=new Image(); c9.src="c9.gif";\nc0=new Image(); c0.src="c0.gif";\n<\/pre><\/div>\n\n\n
affiche()<\/code>, permettant de changer les images, qui prend 3 param\u00e8tres en entr\u00e9e : le nombre d\u2019heures, le nombre de minutes et le nombre de seconde. Pour chacun des trois param\u00e8tres on d\u00e9termine l\u2019image \u00e0 afficher pour les dizaines et les unit\u00e9s. Chaque image est modifi\u00e9e en passant par la propri\u00e9t\u00e9 images de l\u2019objet document<\/a>.<\/p>\n\n\n\n\n\n\n\nfunction affiche(h,m,s){\n if (h<=9){\n document.images.a.src=c0.src\n document.images.b.src=eval("c"+h+".src")\n }\n else {\n document.images.a.src=eval("c"+Math.floor(h\/10)+".src")\n document.images.b.src=eval("c"+(h%10)+".src")\n }\n if (m<=9){\n document.images.d.src=c0.src\n document.images.e.src=eval("c"+m+".src")\n }\n else {\n document.images.d.src=eval("c"+Math.floor(m\/10)+".src")\n document.images.e.src=eval("c"+(m%10)+".src")\n }\n if (s<=9){\n document.images.g.src=c0.src\n document.images.h.src=eval("c"+s+".src")\n }\n else {\n document.images.g.src=eval("c"+Math.floor(s\/10)+".src")\n document.images.h.src=eval("c"+(s%10)+".src")\n }\n}\n<\/pre><\/div>\n\n\nheure()<\/code>, quant-\u00e0 elle r\u00e9cup\u00e8re les heures, minutes et secondes, puis fait appel \u00e0 affiche()<\/code>. Elle s\u2019appelle ensuite r\u00e9cursivement apr\u00e8s un timeout de 1 seconde. Le premier appel \u00e0 cette fonction est assur\u00e9 par l\u2019\u00e9v\u00e9nement onLoad de l\u2019\u00e9l\u00e9ment <body> de la page.<\/p>\n\n\n\nfunction heure(){\n var Digital=new Date()\n var hours=Digital.getHours()\n var minutes=Digital.getMinutes()\n var seconds=Digital.getSeconds()\n \n affiche(hours,minutes,seconds)\n setTimeout("heure()",1000)\n}\n<\/pre><\/div>\n\n\nMon remake<\/h2>\n\n\n\n
\n<div id="clock">\n <div class="clock-digits">\n <img id="hd" src="\/assets\/files\/images\/0.gif"\/>\n <img id="hu" src="\/assets\/files\/images\/0.gif"\/>\n <div>Heures<\/div>\n <\/div>\n <div class="clock-digits">\n <img id="md" src="\/assets\/files\/images\/0.gif"\/>\n <img id="mu" src="\/assets\/files\/images\/0.gif"\/>\n <div>Minutes<\/div>\n <\/div>\n <div class="clock-digits">\n <img id="sd" src="\/assets\/files\/images\/0.gif"\/>\n <img id="su" src="\/assets\/files\/images\/0.gif"\/>\n <div>Secondes<\/div>\n <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
\n<style type="text\/css">\n #clock {\n width: 476px;\n display: flex;\n }\n .clock-digits > div {\n text-align: center;\n }\n<\/style>\n<\/pre><\/div>\n\n\n\nconst date = new Date();\n<\/pre><\/div>\n\n\n
value<\/code>), l\u2019id de l\u2019image des dizaines (dozen<\/code>) et l\u2019id de l\u2019image des unit\u00e9s (unit<\/code>).<\/p>\n\n\n\nlet digits = [\n {value : date.getHours(), dozen: 'hd', unit: 'hu'},\n {value : date.getMinutes(), dozen: 'md', unit: 'mu'},\n {value : date.getSeconds(), dozen: 'sd', unit: 'su'}\n];\n<\/pre><\/div>\n\n\n\ndigits.forEach((digit) => {\n if(digit.value <= 9) {\n document.images[digit.dozen].src = '\/assets\/files\/images\/0.gif';\n } else {\n document.images[digit.dozen].src = `\/assets\/files\/images\/${Math.floor(digit.value\/10)}.gif`;\n }\n \n document.images[digit.unit].src = `\/assets\/files\/images\/${digit.value%10}.gif`;\n});\n<\/pre><\/div>\n\n\n\nsetTimeout(displayTime, 1000);\n<\/pre><\/div>\n\n\n
\nwindow.addEventListener('load', () => {\n displayTime();\n});\n<\/pre><\/div>\n\n\n
\n\n\n\n