22.10.2019, 08:47
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.04.2019
Сообщений: 124
|
|
|
Анимированное увеличение числа
Здравствуйте. Помогите пожалуйста, сделать так, чтобы ниже приведенный скрипт увеличивал число анимированно (чтобы цифры крутились будто счетчик).
<div class="num">1000</div>
let nums = [1249, 1327, 1632];
let secs = [3, 5, 9];
const delay = sec => new Promise(r => setTimeout(r,sec*1000) );
(async () => {
for (let i = 0; i < secs.length; i++) {
await delay(secs[i]);
document.querySelector('.num').textContent = nums[i];
}
})();
|
|
22.10.2019, 08:50
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Lefseq
|
|
сделать так,
|
лезем в гугл, делаем поиск по форуму, находим с десяток вариантов, на любой вкус с плагином, без плагина, на чистом js. |
|
22.10.2019, 09:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
фейковый счётчик с анимацией
Lefseq,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="num">1000</div>
<script>
let nums = [1249, 1327, 1632];
let secs = [3, 5, 9];
let pause = 3000;
const elem = document.querySelector('.num');
const anim = (i, r) => {
let d = performance.now(),
from = +elem.textContent,
to = nums[i],
duration = secs[i] * 1000;
requestAnimationFrame( function e(b) {
b = (b - d) / duration;
1 <= b && (b = 1);
let c = from + (to - from) * b | 0;
elem.innerHTML = c;
b == 1 && setTimeout(r,pause);
1 > b && requestAnimationFrame(e)
})
}
const delay = i => new Promise(r => anim(i, r));
(async () => {
for (let i = 0; i < secs.length; i++) {
await delay(i);
}
})();
</script>
</body>
</html>
Последний раз редактировалось рони, 22.10.2019 в 18:22.
|
|
22.10.2019, 15:14
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.04.2019
Сообщений: 124
|
|
|
Сообщение от рони
|
|
фейковый счётчик с анимацией
|
Это не то. Скрипт, который мне нужно доработать, выдает числа через определенный интервал времени. Только нужно теперь добавить анимации. |
|
22.10.2019, 15:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Lefseq,
???
|
|
22.10.2019, 15:46
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.04.2019
Сообщений: 124
|
|
Сообщение от рони
|
|
лезем в гугл, делаем поиск по форуму, находим с десяток вариантов, на любой вкус с плагином, без плагина, на чистом js.
|
Гуглил, но пока того, что мне нужно не нашел. |
|
22.10.2019, 16:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Lefseq,
что такое анимация, можно пример?
|
|
22.10.2019, 16:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Lefseq,
чем анимация из поста #3 отличается от вашего примера?
|
|
|
|
