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 : 1305
Taille : 113,5 Ko

Nom : 2020-09-03 09_47_11-Adobe Dreamweaver CC 2017 - [index.html].png
Affichages : 1305
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 ?

**Trebor** · 04/09/2020, 01h18

Envoyé par psychadelic

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.

Envoyé par psychadelic

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.

**psychadelic** · 04/09/2020, 02h54

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

**Trebor** · 04/09/2020, 08h26

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.

**Trebor** · 04/09/2020, 08h43

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.

**NoSmoking** · 10/09/2020, 19h07

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.

**Trebor** · 21/02/2021, 09h50

Bonjour NoSmoking,

Merci à tous pour vos réponses.

Désolé pour le délai de réponse. Par obligation professionnelle, j'ai du travailler sur autre chose et mettre ce projet en attente.

J'ai repris activement mon projet.

Envoyé par NoSmoking

pourquoi utiliser jQuery pour si peu de code ?
pourquoi utilises-tu deux setTimeout ?

Je ne sais pas, j'ai repris les infos des différents tutos trouvés sur le net.

Pour ton code, c'est exactement ce que je cherchais.

Je rencontre deux difficultés car je n'arrive pas à lire le code.

~~[1] Je cherche à remplacer les aiguilles par des images et conserver la rotation comme dans ton script.~~

[2] Pour l'affichage digital, je souhaiterais utiliser des images qui ont le même design que mon fond d'horloge. Comment puis-je les intégrer dans le code ?

Merci pour toute l'aide que vous m'apportez.

**Trebor** · 21/02/2021, 09h59

Correction,

J'ai réussi à replacer mes images avec succès.

Il ne me reste qu'à insérer les digits, mais je n'arrive pas à gérer cette partie.

**NoSmoking** · 22/02/2021, 18h43

Il ne me reste qu'à insérer les digits, mais je n'arrive pas à gérer cette partie.

Tout se passe, doit se passer, dans la fonction digitaleClock(date) où il te faut remplacer chaque caractères par l'image du numéro associé.

**NoSmoking** · 25/02/2021, 07h35

J'ai mis au propre une façon de faire sur base d'une image type « sprite ».

• C'est à voir sur Horloge digitale, avec les explications de comment faire.

**Trebor** · 25/02/2021, 22h04

Merci beaucoup NoSmoking,

J'ai enfin réussi à ajouter les digits.

Je n'ai pas utilisé ta solution qui est super sympa en terme d'animation, le "slide" des digits est une superbe idée.

Voici le code que j'ai finalement utilisé :

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
function digitaleClock(date) {
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";
}

pour le corps, j'utilise la balise "img id"

Je vais essayer de remettre tout ça "au propre". J'utilise les mêmes variables dans les 2 fonctions. Je pense qu'il doit y avoir moyen de créer la variable une fois et de les utiliser dans chaque fonction. Mais je dois encore me documenter.

Merci en tout cas, j'ai exactement ce que je voulais.

**NoSmoking** · 27/02/2021, 10h14

Je n'ai pas utilisé ta solution qui est super sympa en terme d'animation, le "slide" des digits est une superbe idée.

Au départ l'effet n'est là que pour montrer le fonctionnement de l'affichage par décalage du background.

Voici le code que j'ai finalement utilisé :

tu es retourné au siècle dernier avec un tel code

Je pense qu'il doit y avoir moyen de créer la variable une fois et de les utiliser dans chaque fonction.

Cela s’appelle la factorisation !

**Trebor** · 27/02/2021, 17h37

Envoyé par NoSmoking

tu es retourné au siècle dernier avec un tel code

J'imagines, j'ai récupéré ce code sur un site HTML mais ça à le mérite d'encore fonctionner. J'ai cherché à le moderniser mais mes compétences en Js sont limi... inexistantes...

Envoyé par NoSmoking

Cela s’appelle la factorisation !

Je cherche, je consulte les différents cours pour essayer de comprendre le langage mais j'ai tellement de choses sur le feu professionnellement qu'à titre personnel, je ne m'en sors pas.

Encore merci pour ton aide et les précieuses infos données qui m'ont aidé à avancer. J'ai une méga horloge au mur maintenant

Horloge Javascript qui ne fonctionne pas.

JavaScript

Discussions similaires

Partager

Partager