Показать сообщение отдельно
  #3 (permalink)  
Старый 22.10.2019, 09:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

фейковый счётчик с анимацией
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.
Ответить с цитированием