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 : 1384 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.