Animation de changement de nombre

Version imprimable

29/06/2024, 15h30
christian-67

Animation de changement de nombre

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.
30/06/2024, 16h13
mathieu

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
30/06/2024, 18h34
christian-67

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

jour

si ca peut inspirer voici ce code

Code:

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:

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>

09/07/2024, 20h04
Dave Hiock

\ô/

Citation:

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

pas sûr que l'on distingue grand chose à cette vitesse !
10/07/2024, 08h06
christian-67

Citation:

Envoyé par melka one

...

Merci, je vais tester ça.

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

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:

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

10/07/2024, 18h12
christian-67

Merci !