1//HTML
2<div id="value">100</div>
3
4//CSS
5div {
6 font: 800 40px system-ui;
7}
8
9//JavaScript
10function animateValue(obj, start, end, duration) {
11 let startTimestamp = null;
12 const step = (timestamp) => {
13 if (!startTimestamp) startTimestamp = timestamp;
14 const progress = Math.min((timestamp - startTimestamp) / duration, 1);
15 obj.innerHTML = Math.floor(progress * (end - start) + start);
16 if (progress < 1) {
17 window.requestAnimationFrame(step);
18 }
19 };
20 window.requestAnimationFrame(step);
21}
22
23const obj = document.getElementById("value");
24animateValue(obj, 100, 0, 5000);
1function animateValue(obj, start, end, duration) {
2 let startTimestamp = null;
3 const step = (timestamp) => {
4 if (!startTimestamp) startTimestamp = timestamp;
5 const progress = Math.min((timestamp - startTimestamp) / duration, 1);
6 obj.innerHTML = Math.floor(progress * (end - start) + start);
7 if (progress < 1) {
8 window.requestAnimationFrame(step);
9 }
10 };
11 window.requestAnimationFrame(step);
12}
13
14const obj = document.getElementById("value");
15animateValue(obj, 0, 1220, 5000);
16
17const obj2 = document.getElementById("value2");
18animateValue(obj2, 0, 520, 5000);
19