Vous êtes sur la page 1sur 1

Applications Hypermdias

A laide de html5, css3 et javascript on va simuler une horloge :


1. Utiliser le fichier essai html. 2. Lancer lhorloge par un bouton appelant la fonction tourne(), ajouter le la fin du paragraphe. 3. Crer deux variables globales, compteur_minutes et compteur_heures, initialises 0. 4. Identifier les lments correspondant chaque image. 5. Selon la valeur de compteur_minutes, changer ses proprits de position : o quand le compteur vaut 0, attribuer l'image aiguilleminute la position de l'lment chiffre1 ; o quand le compteur vaut 1, attribuer l'image aiguilleminute la position de l'lment chiffre2 ; o quand le compteur vaut 2, attribuer l'image aiguilleminute la position de l'lment chiffre3... ... ainsi de suite jusqu' la valeur de compteur 11, auquel cas on attribue l'image aiguilleminute la position de l'lment chiffre12. 6. Incrmenter le compteur_minutes, et lui affecter le reste de sa division euclidienne par 12. 7. Temporiser un appel la fonction toutes les secondes (par un appel la mthode window.setTimeout(nom_fonction, temps_en_millisecondes). Il reste maintenant faire tourner l'aiguille "des heures". 1. Juste aprs avoir chang la valeur du compteur, tester si l'aiguille des minutes est en 12 (cela se fait par un test sur la valeur du compteur). Si cela est le cas, alors reprendre la mme procdure que prcdemment pour le dplacement de l'aiguille des minutes, mais cette fois-ci applique celle des heures, en n'oublient pas d'incrmenter le compteur des heures. Ajouter un bouton permettant d'arrter l'horloge (on fera appel un boolen).

Amina Benjelouaja

TDI2