{"id":162,"date":"2012-10-12T00:53:17","date_gmt":"2012-10-11T22:53:17","guid":{"rendered":"http:\/\/geekcommunicant.com\/blog\/?p=162"},"modified":"2019-04-20T17:54:57","modified_gmt":"2019-04-20T15:54:57","slug":"jquery-une-horloge-sous-forme-de-diagramme","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/12\/jquery-une-horloge-sous-forme-de-diagramme\/","title":{"rendered":"[jQuery] Une horloge sous forme de diagramme"},"content":{"rendered":"\n

Avant de m’essayer \u00e0 l’horloge pr\u00e9sent\u00e9e dans l’article pr\u00e9c\u00e9dent<\/a>, 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<\/a>.<\/p>\n\n\n\n\n\n\n\n

Le but de cet article est de vous expliquer le code que j’ai utilis\u00e9.<\/p>\n\n\n\n

Structure d’une barre<\/span>: une division contenante, masquant une division color\u00e9e qui sert de curseur.<\/p>\n\n\n\n

Voyons tout d’abord le calcul des crans d’incr\u00e9mentation pour chaque barre :<\/p>\n\n\n

\n\/\/ Formule utilis\u00e9e pour chaque barre: hauteur maximum\/nombre de valeurs prises par le digit\n \n\/\/ Dizaines d'heure\nvar hdnotch = 100 \/ 2;\n\/\/ Unit\u00e9s d'heure\nvar hunotch = 100 \/ 9;\n\n\/\/ Dizaines de minute\nvar mdnotch = 100 \/ 5;\n\/\/ Unit\u00e9s de minute\nvar munotch = 100 \/ 9;\n\n\/\/ Dizaines de seconde\nvar sdnotch = 100 \/ 5;\n\/\/ Unit\u00e9s de seconde\nvar sunotch = 100 \/ 9;\n<\/pre><\/div>\n\n\n
Ensuite, la r\u00e9cup\u00e9ration de l’heure se d\u00e9roule de la m\u00eame mani\u00e8re que pour l’horloge en images:<\/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 - su)\/10;\n\n\/\/Traitement des minutes\nvar mu = minutes%10;\nvar md = (minutes%100 - su)\/10;\n\n\/\/Traitement des secondes\nvar su = seconds%10;\nvar sd = (seconds%100 - su)\/10;\n<\/pre><\/div>\n\n\n
Le positionnement des barres est assur\u00e9 en appliquant \u00e0 chaque division curseur une marge \u00ab\u00a0top\u00a0\u00bb correspondant \u00e0: hauteur de la div contenante – (cran*valeur du digit).<\/p>\n\n\n
\n$('#hd').css({'top':100-(hdnotch*hd)});\n$('#hu').css({'top':100-(hunotch*hu)});\n$('#md').css({'top':100-(mdnotch*md)});\n$('#mu').css({'top':100-(munotch*mu)});\n$('#sd').css({'top':100-(sdnotch*sd)});\n$('#su').css({'top':100-(sunotch*su)});\n<\/pre><\/div>\n\n\n
Ces deux morceaux de codes (la r\u00e9cup\u00e9ration des heures, et le positionnement des barres) sont ex\u00e9cut\u00e9s au chargement de la page, et toutes les secondes, \u00e0 l’aide de<\/p>\n\n\n
\nsetInterval(function(){ }, 1000);\n<\/pre><\/div>\n\n\n
J’esp\u00e8re que cet article vous aura \u00e9t\u00e9 aussi int\u00e9ressant que les pr\u00e9c\u00e9dents, et vous dit \u00e0 bient\u00f4t !<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/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":[17,18,16,15],"class_list":["post-162","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-chart","tag-clock","tag-diagramme","tag-horloge"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-2C","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":148,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/04\/jquery-une-horloge-en-image\/","url_meta":{"origin":162,"position":0},"title":"[jQuery] Une horloge en image","author":"geekc","date":"04\/10\/2012","format":false,"excerpt":"Aujourd'hui, nous allons voir comment r\u00e9aliser en jQuery une horloge utilisant des images, que vous pouvez voir en action ici. Avant de commencer Pour des raisons de practicit\u00e9, nous allons utiliser les images utilis\u00e9es par le compteur de Gelbooru, que j'ai rassembl\u00e9es dans cette archive. La structure HTML Avant tout,\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":162,"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":162,"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":10,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/06\/un-dancefloor-en-jquery\/","url_meta":{"origin":162,"position":3},"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":[]},{"id":40,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/26\/un-effet-de-porte-en-jquery\/","url_meta":{"origin":162,"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":798,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/03\/horloge-hexagonale\/","url_meta":{"origin":162,"position":5},"title":"Une horloge hexagonale","author":"geekc","date":"03\/06\/2019","format":false,"excerpt":"\u00c0 la suite de mes premi\u00e8res exp\u00e9rimentations avec les canvas (voir mes trois premiers articles \u00e9tiquet\u00e9s #canvas) et de la consultation r\u00e9cente de pages traitant de la cr\u00e9ation d\u2019horloges utilisant cette technologie, j\u2019ai d\u00e9cid\u00e9 d\u2019en cr\u00e9er une \u00e0 ma fa\u00e7on. Pour mon horloge, j\u2019ai voulu le faire de mani\u00e8re originale,\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/hexa_digits.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/162","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=162"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/162\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}