Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Horloge Javascript qui ne fonctionne pas.


Sujet :

JavaScript

  1. #1
    Membre régulier
    Horloge Javascript qui ne fonctionne pas.
    Bonjour à tous,

    Autant fixer le tableau dès maintenant... Je m'initie à Javascript, HTML et CSS depuis quelques jours étant cloué dans mon lit... Bref....

    J'ai essayé de développer une horloge analogique pour la balancer sur mon téléviseur en fond d'écran quand personne n'est détecté devant le poste (saleté de gosse) et ça fonctionne. Du moins, j'affiche mon horloge sur le navigateur de la TV et en local sur mon PC...

    Toutefois, je n'arrive pas à obtenir l'heure réelle. J'ai suivi une grande partie du pas à pas de ce site et j'ai adapté en fonction de mon souhait de configuration (la trotteuse "glisse" et les minutes rebondissent).

    Voici ce que ça donne dans mon navigateur tv :



    Voici le code de ma page index.html :

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document sans nom</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="time.js">	</script>
    </head>
     
    <body style="background-color:grey;">
    <article class="clock">
      <div class="hours-container">
        <div class="hours"></div>
      </div>
      <div class="minutes-container">
        <div class="minutes"></div>
      </div>
      <div class="seconds-container">
        <div class="seconds"></div>
      </div>
      <div class="center-container">
        <div class="center"></div>
      </div>
    </article>
     
    </body>
    </html>


    Ma page style.css :

    Code CSS :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    .clock {
      background: url(clock400.png) no-repeat center;
      background-size: 100%;
      height: 400px;
      position: relative;
      width: 400px;
    }
     
    .minutes-container, .hours-container, .seconds-container, .center-container {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
     
    .hours {
      background: url(heure.png) no-repeat center;
      height: 400px;
      width: 40px;
      left: 45%;
      position: absolute;
      top: 0%;
      transform-origin: 50% 50%;
    }
     
    .minutes {
      background: url(minute.png) no-repeat center;
      height: 400px;
      width: 40px;
      left: 45%;
      position: absolute;
      top: 0%;
      transform-origin: 50% 50%;
    }
     
    .seconds {
      background: url(seconde.png) no-repeat center;
      height: 400px;
      width: 40px;
      left: 45%;
      position: absolute;
      top: 0%;
      transform-origin: 50% 50%;
    }
     
    .center {
      background: url(center.png) no-repeat center;
      height: 400px;
      width: 40px;
      left: 181px;
      position: absolute;
      top: 0%;
      transform-origin: 50% 50%;
    }
     
    @keyframes rotate {
      100% {
        transform: rotateZ(360deg);
      }
    }
     
    .hours-container {
      animation: rotate 43200s infinite linear;
    }
    .minutes-container {
      animation: rotate 3600s infinite steps(60);
    }
    .seconds-container {
      animation: rotate 60s infinite linear;
    }


    et pour finir ma page time.js :

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    // JavaScript Document
     
    /*
      * Starts any clocks using the user's local time
      * From: cssanimation.rocks/clocks
      */
    function initLocalClocks() {
      // Get the local time using JS
      var date = new Date;
      var seconds = date.getSeconds();
      var minutes = date.getMinutes();
      var hours = date.getHours();
     
      // Create an object with each hand and it's angle in degrees
      var hands = [
        {
          hand: 'hours',
          angle: (hours * 30) + (minutes / 2)
        },
        {
          hand: 'minutes',
          angle: (minutes * 6)
        },
        {
          hand: 'seconds',
          angle: (seconds * 6)
        }
      ];
      // Loop through each of these hands to set their angle
      for (var j = 0; j < hands.length; j++) {
        var elements = document.querySelectorAll('.' + hands[j].hand);
        for (var k = 0; k < elements.length; k++) {
            elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
            elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
            // If this is a minute hand, note the seconds position (to calculate minute position later)
            if (hands[j].hand === 'minutes') {
              elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
            }
        }
      }
    }
     
    	/*
     * Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that
     */
    function setUpMinuteHands() {
      // Find out how far into the minute we are
      var containers = document.querySelectorAll('.minutes-container');
      var secondAngle = containers[0].getAttribute("data-second-angle");
      if (secondAngle > 0) {
        // Set a timeout until the end of the current minute, to move the hand
        var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
        setTimeout(function() {
          moveMinuteHands(containers);
        }, delay);
      }
    }
     
    /*
     * Do the first minute's rotation
     */
    function moveMinuteHands(containers) {
      for (var i = 0; i < containers.length; i++) {
        containers[i].style.webkitTransform = 'rotateZ(6deg)';
        containers[i].style.transform = 'rotateZ(6deg)';
      }
      // Then continue with a 60 second interval
      setInterval(function() {
        for (var i = 0; i < containers.length; i++) {
          if (containers[i].angle === undefined) {
            containers[i].angle = 12;
          } else {
            containers[i].angle += 6;
          }
          containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
          containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
        }
      }, 60000);
    }


    Voilà... Le soucis c'est que mon horloge se mets à 0h00h00 lorsqu'on rafraîchit la page et je ne comprends pas pourquoi. C'est peut-être bête comme solution mais mes connaissances ne m'ont pas permis de solutionner mon problème.

    Merci d'avance pour votre aide.

  2. #2
    Rédacteur/Modérateur

    à quel moment le script est il lancé sur la page ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre régulier
    Citation Envoyé par SpaceFrog Voir le message
    à quel moment le script est il lancé sur la page ?
    Merci pour ta réponse.

    Je ne sais pas. Comme je le précisais, je n'ai que très peu de connaissance dans les langages HTML, CSS et JS.

    Je suis venu demandé de l'aide car j'ai passé une partie de la nuit à essayer de trouver d'où venait l'erreur mais sans succès.

    Je n'ai pas trouver plus d'explication sur le site pour expliquer ou placer les différentes parties du code, j'ai peut être déjà fait des erreurs à ce niveau.

    J'ai lu sur de nombreuses pages : "c'est facile... rien de plus simple...". Peut-être mais j'avoue que je ne sais pas trop de quel côté chercher ou ce que je dois corriger.

  4. #4
    Membre régulier
    Pour te répondre, si la question est : "A quel moment je souhaite lancer le script ?"

    Sur ma TV, j'ai la possibilité d'appeler une page web en guise d'économiseur d'écran. Donc, je souhaiterais que mon script se lance à l'ouverture de la page.

    La TV supporte parfaitement JS, CSS et HTML5.

  5. #5
    Rédacteur/Modérateur

    Il semble que ce soit cette partie là qui ne soit pas prise en compte ou ne fonctionne pas comme attendu...
    // Get the local time using JS
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
      var date = new Date;
      var seconds = date.getSeconds();
      var minutes = date.getMinutes();
      var hours = date.getHours();

    Elle est supposé récupérer l'heure de la machine ...
    Essaye de tester ce que code seul retourne (avec un alert ou en affichant seconds, minutes et hours)
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  6. #6
    Membre régulier
    J'ai testé avec windows.alert et cela fonctionne. Je récupère bien les variables date, secondes, minutes et heures. J'ai toutefois ajouté dans le script la ligne initLocalClocks(); à la fin de la page time.js car sinon, cela ne fonctionnait pas.

  7. #7
    Expert confirmé
    je doute que cette horloge puisse vraiment donner une heure fiable, j'ai l'impression que les intervalles de temps sont gérés en CSS, ça m'étonnerai que l'on puisse s'y fier.

    sinon, je me demande d’où proviennent les images de l'horloge ?
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  8. #8
    Membre régulier
    Citation Envoyé par psychadelic Voir le message
    je doute que cette horloge puisse vraiment donner une heure fiable, j'ai l'impression que les intervalles de temps sont gérés en CSS, ça m'étonnerai que l'on puisse s'y fier.
    Effectivement, c'est vraisemblablement CSS qui gère les intervalles de temps mais pour l'utilisation que j'en fais c'est largement suffisant.


    Citation Envoyé par psychadelic Voir le message
    sinon, je me demande d’où proviennent les images de l'horloge ?
    J'ai récupéré de ci, de là des images sur le net via un moteur de recherche et j'ai retravaillé le tout sur GIMP pour que l'ensemble corresponde en terme de dimension.

  9. #9
    Expert confirmé
    ce qui m'étonne sur cette horloge, ce sont les ombres...
    dans la position présentée celles des aiguilles sont à peu près cohérentes, mais je n'imagine pas que cela puisse être le cas sur tout autres heures....
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  10. #10
    Membre régulier
    Les ombres ne sont effectivement pas cohérentes mais comme c'est pour mon usage personnel, cela m'importe peux. j'ai essayé sans ombrage et le rendu est moins bon.

  11. #11
    Membre régulier
    Finalement, j'ai refais mon code en intrégralité cette nuit et ça fonctionne presque comme je le souhaiterais...

    J'ai même ajouté un affichage digital.

    Voici le code mis à jour :

    index.html :

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document sans nom</title>
    <link rel="stylesheet" href="style.css" />
    <script src="jquery-3.1.1.js" type="text/javascript"></script>
    <script src="time.js" type="text/javascript"></script>
    </head>
     
    <body>
     
    <div id="clock">
    	<img id="h1" src="0.gif" name="heure1" />
    	<img id="h2" src="0.gif" name="heure2" />
    	<img id="m1" src="0.gif" name="minute1" />
    	<img id="m2" src="0.gif" name="minute2" />
    	<img id="heures" src="heure.png" />
    	<img id="minutes" src="minute.png" />
    	<img id="secondes" src="seconde.png" />
    	<img id="center" src="center.png" />
    </div>
     
    </body>
    </html>


    style.css :

    Code CSS :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    @charset "utf-8";
    /* CSS Document */
     
    div#clock {
    	position: relative;
    	width: 400px;
    	height: 400px;
    	background: url(clock.png) no-repeat center;
    	margin: auto;
    }
     
    img#heures {
    	background: url(heure.png) no-repeat center;	
    	position: absolute;
    	left: 45%;
    	top: 0%;
    	height: 400px;
    	width: 40px;
    	transform-origin: center;	
    }
     
    img#minutes {
    	background: url(minute.png) no-repeat center;
    	position: absolute;
    	left: 45%;
    	top: 0%;
    	height: 400px;
    	width: 40px;
    	transform-origin: center;
    }
     
    img#secondes {
    	background: url(seconde.png) no-repeat center;
    	position: absolute;
    	left: 45%;
    	top: 0%;
    	height: 400px;
    	width: 40px;
    	transform-origin: center;
    }
     
    img#center {
    	background: url(center.png) no-repeat center;
    	position: absolute;
    	left: 181px;
    	top: 0%;
    	height: 400px;
    	width: 40px;
    	transform-origin: center;
    }
     
    img#h1 {
    	background: url() no-repeat center;
    	position: absolute;
    	left: 39px;
    	top: 38%;
    	transform-origin: center;
    }
     
    img#h2 {
    	background: url() no-repeat center;
    	position: absolute;
    	left: 103px;
    	top: 38%;
    	transform-origin: center;
    }
     
    img#m1 {
    	background: url() no-repeat center;
    	position: absolute;
    	left: 233px;
    	top: 38%;
    	transform-origin: center;
    }
     
    img#m2 {
    	background: url() no-repeat center;
    	position: absolute;
    	left: 297px;
    	top: 38%;
    	transform-origin: center;
    }


    time.js

    Code Jscript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    $(document).ready(function() {
    	horloge();
    	affiche()
    });
    
    function horloge() {
    	var d = new Date();
    	var hours = d.getHours();
    	var min = d.getMinutes();
    	var sec = d.getSeconds();
    	var rotheures = (hours * 30) + (min / 2);
    	$("#heures").css("transform","rotate("+rotheures+"deg)");
    	$("#minutes").css("transform","rotate("+6*min+"deg)");
    	$("#secondes").css("transform","rotate("+6*sec+"deg)");
    
    	setTimeout(horloge,1000);
    }
    
    function affiche() {
    	var dd = new Date();
    	var hoursd = dd.getHours();
    	var mind = dd.getMinutes();
    	if (hoursd<10) { hoursd="0"+hoursd; }
    	if (mind<10) { mind="0"+mind; }
    	var heureComplete = "" + hoursd + mind;
    	var heure1 = heureComplete.charAt(0);
    	document.heure1.src = heure1+".gif";
    	var heure2 = heureComplete.charAt(1);
    	document.heure2.src = heure2+".gif";
    	var minute1 = heureComplete.charAt(2);
    	document.minute1.src = minute1+".gif";
    	var minute2 = heureComplete.charAt(3);
    	document.minute2.src = minute2+".gif";
    	setTimeout(affiche,1000);
    }


    Mon soucis est que la trotteuse saccade, j'aurais préféré un défilement plus fluide. J'ai ajouté une animation en CSS mais lorsqu'on rafraichit la page, la trotteuse repart de 0...

    Quelqu'un aurait-il une idée pour que je puisse gérer cet inconvénient ?

    Merci.

  12. #12
    Modérateur

    Bonjour,
    Finalement, j'ai refais mon code en intrégralité...
    Je pense que tu n'as pas exactement/correctement intégré le code que tu cites mais parfois réinventer la roue permet de voir comment elle fonctionne.
    Dans l'exemple cité le JavaScript n'est là que pour l'initialisation le CSS se chargeant du reste.


    Mon soucis est que la trotteuse saccade, j'aurais préféré un défilement plus fluide.
    perso j'aime bien cet effet de saccade qui accentue l'avancement du temps !
    Je te répond plus avant ... juste après


    mais lorsqu'on rafraichit la page, la trotteuse repart de 0...

    Quelqu'un aurait-il une idée pour que je puisse gérer cet inconvénient ?
    La période d'initialisation fera que l'affichage, même furtif, laissera apparaître cette situation, d'autant que tu as le chargement des images qui peut influencer.

    Petites remarques au passage :
    • pourquoi utiliser jQuery pour si peu de code ?
    • pourquoi utilises-tu deux setTimeout ?


    Si tu veux avoir un effet de déplacement « fluide » il te faut faire un affichage à une fréquence plus élevée et pour cela il existe la méthode requestAnimationFrame(callBack) qui remplacera avantageusement tes setTimeout.

    Le JavaScript prendra en charge le calcul de l'angle de rotation, suivant l'heure courante, à appliquer aux différents éléments sur la propriété CSS transform.

    Exemple de ce qui peut être fait :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horloge fluide</title>
    <meta name="Author" content="NoSmoking">
    <meta name="DVP-discussion" content="d2090203">
    <meta name="description" content="Affichage d'une horloge avec déplacement des aiguilles fluide.">
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.5 Verdana,sans-serif;
    }
    h1, h2, h3 {
      margin: .25em 0;
      color: #069;
    }
    time {
      float: right;
      margin: .5em;
      font-size: 0.9em;
      color: #888;
    }
    main {
      display: block;
      margin: auto;
      max-width: 60em;
    }
    #clock {
      position: relative;
      width: 60vh;
      height: 60vh;
      margin: auto;
      background-image: url(_fond-clock.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    #clock div {
      box-shadow: 0 0 .5em transparent; /* anti crénelage ! */
      will-change: transform;
    }
    #heures {
      position: absolute;
      top: 25%;
      left: calc( 50% - 1.1vh);
      width: 2.2vh;
      height: 50%;
      border-radius: 1.1vh;
      background: linear-gradient(rgba(100,150,200,.7) 0%, rgba(50,100,150,.7) 50%, transparent 50%);
    }
    #minutes {
      position: absolute;
      top: 10%;
      left: calc( 50% - .8vh);
      width: 1.6vh;
      height: 80%;
      border-radius: .8vh;
      background: linear-gradient(rgba(150,200,250,.8) 0%, rgba(50,100,150,.8) 50%, transparent 50%);
    }
    #secondes {
      position: absolute;
      top: 0%;
      left: calc( 50% - .4vh);
      width: .8vh;
      height: 100%;
      border-radius: .4vh;
      background: linear-gradient(rgba(100,150,200,.9) 0%, rgba(0,50,150,.9) 60%, transparent 60%);
    }
    #center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1.6vh;
      height: 1.6vh;
      border: .5vh solid #069;
      border-radius: 50%;
      background-color: #CCC;
      transform: translate(-50%, -50%);
    }
    #info {
      position: absolute;
      bottom: 30%;
      width: 100%;
      text-align: center;
      font-size: 5vh;
      color: #069;
    }
    </style>
    </head>
    <body>
    <main>
      <header>
        <time datetime="2020-09-09">Sept. 2020</time>
        <h1>Horloge avec déplacement fluide</h1>
      </header>
      <div id="clock">
        <div id="heures"></div>
        <div id="minutes"></div>
        <div id="secondes"></div>
        <div id="center"></div>
        <div id="info"></div>
      </div>
      <p><b>Nota</b> : La fluidité sur le déplacement des aiguilles des heures et des minutes n'est pas forcément perceptible.</p>
      <footer>
        <p>Voir la <a href="https://www.developpez.net/forums/showthread.php?t=2090203">discussion sur Developpez.com</a>
      </footer>
    </main>
    <script>
    "use strict";
    const HEURE_ALPHA_MS   = 360 / 43200000;    // pas de 0.000008333333333333334
    const MINUTE_ALPHA_MS  = 360 / 3600000;     // pas de 0.0001
    const SECONDE_ALPHA_MS = 360 / 60000;       // pas de 0.006
     
    const elHeures = document.getElementById("heures");
    const elMinutes = document.getElementById("minutes");
    const elSecondes = document.getElementById("secondes");
    const elInfo = document.getElementById("info");
     
    function digitaleClock(date) {
      const sDate = date.toLocaleString().split(" ").pop();
      elInfo.textContent = sDate;
    }
     
    function analogiqueClock(date) {
      const h = date.getHours();
      const m = date.getMinutes();
      const s = date.getSeconds();
      const ms = date.getMilliseconds();
      let angle;
      // convert en millisecondes
      const sToMs = (s * 1000) + ms;
      const mToMs = ((m * 60) * 1000) + sToMs;
      const hToMs = ((h * 3600) * 1000) + mToMs;
      // draw Secondes
      angle = (sToMs * SECONDE_ALPHA_MS) % 360;
      elSecondes.style.transform = "rotate(" + angle + "deg)";
      // draw Minutes
      angle = (mToMs * MINUTE_ALPHA_MS) % 360;
      elMinutes.style.transform = "rotate(" + angle + "deg)";
      // draw Heures
      angle = (hToMs * HEURE_ALPHA_MS) % 360;
      elHeures.style.transform = "rotate(" + angle + "deg)";
    }
     
    function updateClock() {
      const d = new Date();
      analogiqueClock(d);
      digitaleClock(d);
      requestAnimationFrame(updateClock);
    }
    updateClock();
    </script>
    </body>
    </html>

    Je te laisse regarder le script.

    Nota : La fluidité sur le déplacement des aiguilles des heures et des minutes n'est pas forcément perceptible.

    L'exemple en ligne : Horloge avec déplacement fluide.

###raw>template_hook.ano_emploi###