Horloge numérique jquery

clignotement des 2 points

Sujet résolu

26 mai 2011 à 20:37:36

Salut à tous,

j'ai mis une horloge numérique sur mon site faite en js par l'intermédiaire de jquery.
Tout fonctionne nickel, elle donne bien l'heure!

Par contre je voudrais rajouter une petite touche pour la terminer proprement.
Elle se présente sous cette forme:

08:26 AM

les chiffres changent quand nécessaire mais ce que je voudrais en plus c'est que les ":"clignotent toutes les secondes.
Donc j'ai pensé utiliser in fadeIn et fadeOut de 500 ms sur ces ":" puis le "setInterval" de 1s de la fonction principale permettrait de boucler le truc pour créer ce mouvement perpetuel de clignotement... seulement je n'arrive pas à l'implémenter.

Voilà le code:

$(function (){
	setInterval(function(){
	var currentTime = new Date();
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
	var suffix = "AM";
	
	
	if(h >= 12){suffix = "PM";h = h - 12;}
	if(h == 0){h = 12;}
	if(h < 10){h = "0" + h ;}
	if(m < 10){m = "0" + m ;}
		
	$("#screen div").text(h+":"+m+" "+suffix);
	},1000);
	
});

J'ai essayé de déclarer les ":" dans une variable à laquelle j'ai ajouté les fonctions fadeIn et fade Out pour en ressortir une nouvelle variable que j'ai intégrée à la fonction text finale mais sans succés.
Donc si quelqu'un pouvait m'aiguiller pour réussir ce challenge, ce serait coooool!

Merci

Anonyme

26 mai 2011 à 20:53:02

Un fadeIn et fadeOut pour deux points ?

Ne serait-il pas préférable de changer l'affichage toutes les 500 millisecondes pour remplacer une fois sur deux les deux points par un espace en adoptant une police non proportionnelle comme un "Courier New" par exemple.

Farangprod

26 mai 2011 à 21:49:47

J'y ai pensé à cette solution avec un setTimeout de 500ms pour l'affichage du "sans point" sauf que dans mon design, j'utilise une font-face qui n'est pas à largeur fixe donc, toute la seconde partie de l'horloge se décalle toutes les 1/2 secondes.
il faudrait un truc du genre:

$("#screen div").text(h+"clignotement()"+m+" "+suffix);

une fonction dans la fonction text()

Pour le moment, j'ai suivi les conseils de 007julien en éditant ma police personnalisée pour que l'espace et les ":" soient métriquement identiques donc comme ça, je peux utiliser l'alternance d'affichage avec mon timeout.
Je suis quand même toujours open pour une solution moins radicale que la modification de Font.

Darkodam

26 mai 2011 à 23:03:54

Tu pourrais mettre les heures, les secondes et le deux-points dans 3 éléments html distincts. Tu aurais donc juste à modifier ta fonction principale pour mettre à jour ces 2 éléments séparément et avoir une 2ème fonction qui s'occuperait du fadin fadeout du deux-points.

Farangprod

26 mai 2011 à 23:15:49

Ouais, 3 balises dans mon conteneur avec les heures dans la première, les ":" dans la seconde et les minutes + suffix dans la dernière... c'est une idée...pt'être un peu lourd à gérer les 3 balises + css de chacune mais je crois que c'est la solutionla plus simple tout de même.

merci darkodam

Darkodam

27 mai 2011 à 0:28:54

Le truc qui bouffera le plus ce sera la fonction Date() sans hésiter. Donc t'inquiètes pas pour ça. Et de toute façon c'est la seule solution, tu peux pas changer le css d'une partie d'un noeud texte. c'est soit le texte en entier soit rien =)

Anonyme

27 mai 2011 à 1:47:22

Dans ces conditions, il suffit de placer les deux points dans un span que l'on rend visible ou invisible. Le script suivant fonctionne parfaitement sans JQuery !

<body>
<div id="idd"></div>
<script type="text/javascript">
var _i=true;
setInterval(function(){
    var currentTime = new Date();
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var suffix = "AM";
    if(h >= 12){suffix = "PM";h = h - 12;}
    if(h == 0){h = 12;}
    if(h < 10){h = "0" + h ;}
    if(m < 10){m = "0" + m ;}
    document.getElementById('idd').innerHTML=h+'<span id="spa">:</span>'+m+' '+suffix;
    document.getElementById('spa').style.visibility=(_i=!_i)?'visible':'hidden';
    },500);
</script>
</body>
</html>

EDIT : À la réflexion, il est dommage de tout réécrire à chaque secondes, il est certainement préférable de lire l'heure puis d'incrémenter un compteur et de travailler modulo 60 (ou 120 toutes les 500 millisecondes)...

Farangprod

27 mai 2011 à 7:05:59

Citation : 007Julien

À la réflexion, il est dommage de tout réécrire à chaque secondes, il est certainement préférable de lire l'heure puis d'incrémenter un compteur et de travailler modulo 60 (ou 120 toutes les 500 millisecondes)...

réécrire 2 caractères ou 4, c'est un peu kif-kif, non? et l'avantage de lire l'heure chaque seconde c'est qu'on est sûr que l'horloge ne se décalera pas si on laisse la page ouverte.

En tout cas, merci à tous pour ces conseils et ces perspectives nouvelles

Anonyme

27 mai 2011 à 11:41:46

Il ne s'agit pas de réécrire des caractères, mais simplement de faire clignoter les secondes 120 fois avant de modifier les minutes et éventuellement l'heure.

En toute hypothèse, ces modalités d'affichage de l'heure semblent devoir être renouvelées en sortant un peu des sentiers battus...

Mon premier essai, un peu lourd bien que dans l'air du temps, souffre malheureusement de quelques décalages...