Horloge Javascript qui ne fonctionne pas.

**Trebor** · 03/09/2020, 09h58

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 :

Nom : 2020-09-03 09_47_11-Adobe Dreamweaver CC 2017 - [index.html].png
Affichages : 1406
Taille : 113,5 Ko

Nom : 2020-09-03 09_47_11-Adobe Dreamweaver CC 2017 - [index.html].png
Affichages : 1406
Taille : 113,5 Ko

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.

**SpaceFrog** · 03/09/2020, 15h29

à quel moment le script est il lancé sur la page ?

**Trebor** · 03/09/2020, 15h36

Envoyé par SpaceFrog

à 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.

**Trebor** · 03/09/2020, 15h38

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.

**SpaceFrog** · 03/09/2020, 16h40

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)

**Trebor** · 03/09/2020, 18h58

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.

**psychadelic** · 03/09/2020, 22h12

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 ?

Horloge Javascript qui ne fonctionne pas.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager