{"id":148,"date":"2012-10-04T18:42:02","date_gmt":"2012-10-04T16:42:02","guid":{"rendered":"http:\/\/geekcommunicant.com\/blog\/?p=148"},"modified":"2023-01-05T10:08:50","modified_gmt":"2023-01-05T09:08:50","slug":"jquery-une-horloge-en-image","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/04\/jquery-une-horloge-en-image\/","title":{"rendered":"[jQuery] Une horloge en image"},"content":{"rendered":"\n

Aujourd’hui, nous allons voir comment r\u00e9aliser en jQuery une horloge utilisant des images, que vous pouvez voir en action ici<\/a>.<\/p>\n\n\n\n\n\n\n\n

Avant de commencer<\/h2>\n\n\n\n

Pour des raisons de practicit\u00e9, nous allons utiliser les images utilis\u00e9es par le compteur de Gelbooru<\/a>, que j’ai rassembl\u00e9es dans cette archive<\/a>.<\/p>\n\n\n\n

La structure HTML<\/h2>\n\n\n\n

Avant tout, de quoi a t-on besoin pour faire une horloge ? On a besoin de repr\u00e9senter: les heures, les minutes et les secondes. Ce qui am\u00e8ne \u00e0 3×2=6<\/strong> images (il faut une image pour les dizaines, et une autre pour les unit\u00e9s). On peut \u00e9ventuellement indiquer \u00ab\u00a0heures\u00a0\u00bb, \u00ab\u00a0minutes\u00a0\u00bb et \u00ab\u00a0secondes\u00a0\u00bb. Ce qui nous am\u00e8ne donc \u00e0 la structure HTML suivante:<\/p>\n\n\n

\n<table style="text-align:center;">\n\t<tr>\n\t\t<td><img id="hd" src=".\/images\/0.gif" \/><\/td> <!-- dizaines d'heure -->\n\t\t<td><img id="hu" src=".\/images\/0.gif" \/><\/td> <!-- unit\u00e9s d'heure -->\n\t\t<td><img id="md" src=".\/images\/0.gif" \/><\/td> <!-- dizaines de minute -->\n\t\t<td><img id="mu" src=".\/images\/0.gif" \/><\/td> <!-- unit\u00e9s de minute -->\n\t\t<td><img id="sd" src=".\/images\/0.gif" \/><\/td> <!-- dizaines de seconde -->\n\t\t<td><img id="su" src=".\/images\/0.gif" \/><\/td> <!-- unit\u00e9s de seconde -->\n\t<\/tr>\n\t<tr>\n\t\t<td colspan="2">heures<\/td>\n\t\t<td colspan="2">minutes<\/td>\n\t\t<td colspan="2">secondes<\/td>\n\t<\/tr>\n<\/table>\n<\/pre><\/div>\n\n\n
Le code jQuery<\/h2>\n\n\n\n
Le principe derri\u00e8re ce code est relativement simple: \u00e0 chaque seconde, l’attribut src<\/code> de chaque image est remplac\u00e9 par celui correspondant au chiffre devant \u00eatre affich\u00e9 par l’image.<\/p>\n\n\n
\n\/\/On r\u00e9cup\u00e8re la date\nvar hour = new Date().getHours();\nvar minutes = new Date().getMinutes();\nvar seconds = new Date().getSeconds();\n        \n\/\/Traitement des heures\nvar hu = hour%10;\nvar hd = (hour%100 - hu)\/10;\n        \n\/\/Traitement des minutes\nvar mu = minutes%10;\nvar md = (minutes%100 - mu)\/10;\n        \n\/\/Traitement des secondes\nvar su = seconds%10;\nvar sd = (seconds%100 - su)\/10;\n        \n\/\/On actualise les images\n$('#hd').attr('src','\/assets\/files\/images\/'+hd+'.gif');\n$('#hu').attr('src','\/assets\/files\/images\/'+hu+'.gif');\n$('#md').attr('src','\/assets\/files\/images\/'+md+'.gif');\n$('#mu').attr('src','\/assets\/files\/images\/'+mu+'.gif');\n$('#sd').attr('src','\/assets\/files\/images\/'+sd+'.gif');\n$('#su').attr('src','\/assets\/files\/images\/'+su+'.gif');\n        \nsetInterval(function(){\n    var hour = new Date().getHours();\n    var minutes = new Date().getMinutes();\n    var seconds = new Date().getSeconds();\n        \n    var hu = hour%10;\n    var hd = (hour%100 - hu)\/10;\n        \n    var mu = minutes%10;\n    var md = (minutes%100 - mu)\/10;\n        \n    var su = seconds%10;\n    var sd = (seconds%100 - su)\/10;\n        \n    $('#hd').attr('src','\/assets\/files\/images\/'+hd+'.gif');\n    $('#hu').attr('src','\/assets\/files\/images\/'+hu+'.gif');\n    $('#md').attr('src','\/assets\/files\/images\/'+md+'.gif');\n    $('#mu').attr('src','\/assets\/files\/images\/'+mu+'.gif');\n    $('#sd').attr('src','\/assets\/files\/images\/'+sd+'.gif');\n    $('#su').attr('src','\/assets\/files\/images\/'+su+'.gif');\n},1000); \/\/R\u00e9p\u00e8te les m\u00eames actions, toutes les secondes\n<\/pre><\/div>\n\n\n
Et voil\u00e0 !!!<\/p>\n","protected":false},"excerpt":{"rendered":"
Aujourd’hui, nous allons voir comment r\u00e9aliser en jQuery une horloge utilisant des images, que vous pouvez voir en action ici.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3],"tags":[15],"class_list":["post-148","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-horloge"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-2o","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":162,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/12\/jquery-une-horloge-sous-forme-de-diagramme\/","url_meta":{"origin":148,"position":0},"title":"[jQuery] Une horloge sous forme de diagramme","author":"geekc","date":"12\/10\/2012","format":false,"excerpt":"Avant de m'essayer \u00e0 l'horloge pr\u00e9sent\u00e9e dans l'article pr\u00e9c\u00e9dent, je m'\u00e9tait pos\u00e9 la question de trouver une forme plus originale d'afficher l'heure. Apr\u00e8s quelques recherches et essai, je suis arriv\u00e9 \u00e0 ce r\u00e9sultat. Le but de cet article est de vous expliquer le code que j'ai utilis\u00e9. Structure d'une barre:\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1143,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/03\/24\/gloubi-script-horloge-illustree\/","url_meta":{"origin":148,"position":1},"title":"Gloubi script – une horloge illustr\u00e9e","author":"geekc","date":"24\/03\/2023","format":false,"excerpt":"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\u00a0: 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 ici. Pr\u00e9sentation de la version gloubi Pour commencer, on cr\u00e9\u00e9\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":171,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/18\/jquery-une-fenetre-modale\/","url_meta":{"origin":148,"position":2},"title":"[jQuery] Une fen\u00eatre modale","author":"geekc","date":"18\/10\/2012","format":false,"excerpt":"Bonjour \u00e0 tous, aujourd'hui nous allons voir comment r\u00e9aliser une fen\u00eatre modale en jQuery. Qu'est-ce que c'est ? Wikip\u00e9dia donne la d\u00e9finition suivante: Une fen\u00eatre modale est, dans une interface graphique, une fen\u00eatre qui prend le contr\u00f4le total du clavier et de l'\u00e9cran. Elle est en g\u00e9n\u00e9ral associ\u00e9e \u00e0 une\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":25,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/12\/un-compteur-de-caracteres-en-jquery\/","url_meta":{"origin":148,"position":3},"title":"Un compteur de caract\u00e8res en jQuery","author":"geekc","date":"12\/09\/2012","format":false,"excerpt":"Aujourd'hui nous allons voir comment faire un plugin jQuery, qui permet de compter le nombre de caract\u00e8res pouvant encore \u00eatre accept\u00e9 dans des champs de texte. Pour commencer, il faut d\u00e9cider du nombre de variables utiles \u00e0 ce genre de r\u00e9alisation. Une longueur maximale autoris\u00e9e est un minimum. Ensuite, comme\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":40,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/26\/un-effet-de-porte-en-jquery\/","url_meta":{"origin":148,"position":4},"title":"Un effet de porte en jQuery","author":"geekc","date":"26\/09\/2012","format":false,"excerpt":"Aujourd'hui nous allons voir comment cr\u00e9er en jQuery et jQuery UI un effet de porte, avec l'image se s\u00e9parant en 4 par les coins, r\u00e9v\u00e9lant ainsi un texte. Avant tout, il faut comprendre comment s'organiseront les diff\u00e9rentes couches: \u00e0 la base, on trouve la couche contenant le texte (z-index: 0)juste\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/06\/un-dancefloor-en-jquery\/","url_meta":{"origin":148,"position":5},"title":"Un dancefloor en jQuery","author":"geekc","date":"06\/09\/2012","format":false,"excerpt":"Aujourd'hui, je vais vous expliquer comment cr\u00e9er en jQuery un effet de dancefloor \u00e0 la Saturday Night Fever (demo). Tout d'abord, de quoi est compos\u00e9 un tel \u00ab plancher de danse \u00bb ? Tout simplement de diff\u00e9rents carr\u00e9s\/cases, le tout contenu dans une surface d\u00e9finie. Ici le dancefloor sera une\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/148\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}