Animation de changement de nombre

**christian-67** · 29/06/2024, 15h30

Bonjour,
Je ne suis malheureusement pas un spécialiste de Javascript.
J'ai une page qui contient un Div, Div qui contient lui-même un nombre.
A intervalle régulier, ce nombre est mis à jour, par une fonction Javascript (lecture dans un fichier texte présent sur le serveur, fichier mis à jour régulièrement).
Je souhaite mettre une animation sur ce nombre pour que le changement de valeur se fasse en 1 seconde. Le changement peut être vers le bas ou vers le haut, l'animation doit donc se faire de la valeur actuelle vers la nouvelle valeur.
Merci de bien vouloir me montrer comment faire.
Christian.

**mathieu** · 30/06/2024, 16h13

quelle genre d'animation voulez vous ?
il y a beaucoup de choses faisables en CSS :
https://developer.mozilla.org/fr/docs/Web/CSS/animation

j'ai aussi trouvé un exemple plus évolué avec javascript :
https://codepen.io/mgeraci/pen/xxzOwz

**christian-67** · 30/06/2024, 18h34

Ce que je souhaite, c'est que si le nombre passe de 0 à 50, on voit les nombre défiller de 0 à 50 en 1 seconde.
Ensuite, le nombre passe à 25. Je voudrais voir les nombres défiler de 50 à 25 en seconde.
Etc...

**melka one** · 04/07/2024, 01h11

jour

si ca peut inspirer voici ce code

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
<!DOCTYPE HTML>
<html>
 
<head>
 
<meta charset="UTF-8">
<style>
 
#premier{
    width:150px;
        height:150px;
    margin:auto;
        overflow: hidden;
        margin-bottom:15px;
        border:2px ridge #aaa;
        border-color:#585858;
    box-shadow: 10px 10px 10px #616161;
    }
  
 
.dv{
        
        margin-top:0px;
    width:150px;
        height:300px;
        transition-property: all;
        transition-duration: 2s;
        transition-delay: 0s;
        
    }
        
.dvb{
        
        margin-top:-150px;
    width:150px;
        height:300px;
        transition-property: all;
        transition-duration: 2s;
        transition-delay: 0s;
        
    }
        
#diva, #divb{
 
        width:150px;
        height:150px;
        text-align:center;
        font-size: 130px;
        
}
  
  
</style>
 
<script>
 
 
function ok() {
 
        var valeur=document.getElementById("txt").value
        
        if(document.getElementById("dv").classList=="dv"){
        
        document.getElementById("divb").textContent=valeur
        }
        
        else{
        
        document.getElementById("diva").textContent=valeur
        }
        
        document.getElementById("dv").classList.toggle("dvb");
 
}
 
</script>
</head>
<body>
 
<button onclick="ok()">valider</button>
<br>
choisir texte <input type='text' id='txt' />
<br><br>
 
<div id="premier">
 
	<div id="dv" class='dv'>
 
		<div id="diva">
			10
		</div>
 
		<div id="divb">
			20
		</div>
 
</div>
 
</div>
</body></html>

et un autre

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
<!DOCTYPE HTML>
<html>
<head>
 
<meta charset="UTF-8">
<style>
 
#diva{
        width:150px;
        height:150px;
        text-align:center;
        font-size: 130px;
        margin:auto;
        margin-bottom:15px;
        border:2px ridge #aaa;
        border-color:#585858;
    box-shadow: 10px 10px 10px #616161;
}
 
</style>
 
<script>
 
var chiffre=0
 
function prep(){
 
        var valeur=parseInt(document.getElementById("txt").value)
 
        var nombre = valeur-chiffre
 
        var timer=1000/Math.abs(nombre)
 
        ok(timer,valeur)
}
 
function ok(timer,valeur) {
 
        document.getElementById("diva").textContent=chiffre
        
        if(chiffre!=valeur){
                setTimeout(ok,timer,timer,valeur)
        }
        valeur > chiffre ? chiffre++ : chiffre--
}
 
</script>
</head>
<body>
 
<button onclick="prep()">valider</button>
<br>
choisir chiffre <input type='text' id='txt' />
<br><br>
 
<div id="premier">
 
	<div id="diva">
		0
	</div>
</div>
 
</body></html>

**Dave Hiock** · 09/07/2024, 20h04

\ô/

on voit les nombre défiller de 0 à 50 en 1 seconde.

pas sûr que l'on distingue grand chose à cette vitesse !

**christian-67** · 10/07/2024, 08h06

Envoyé par melka one

...

Merci, je vais tester ça.

EDIT : le deuxième code fourni répond parfaitement à ma demande ! Un grand merci !

**NoSmoking** · 10/07/2024, 10h30

Bonjour,
dans le cas de la 2éme proposition de melka one, il y auarit lieu de gérer le « timer » du setTimeout pour éviter, lors d'une deuxième validation, de mettre l'affichage en vrac.

La fonction pourrait se modifier ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
let iTimer;
function ok(timer, valeur) {
  clearTimeout(iTimer);
  document.getElementById("diva")
    .textContent = chiffre
  if (chiffre != valeur) {
    iTimer = setTimeout(ok, timer, timer, valeur)
  }
  valeur > chiffre ? chiffre++ : chiffre--
}

**christian-67** · 10/07/2024, 18h12

Merci !

Animation de changement de nombre

JavaScript

Discussions similaires

Partager

Partager