Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2019, 08:47
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 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];
	}
})();
Ответить с цитированием
  #2 (permalink)  
Старый 22.10.2019, 08:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

фейковый счётчик с анимацией
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.
Ответить с цитированием
  #4 (permalink)  
Старый 22.10.2019, 15:14
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Сообщение от рони
фейковый счётчик с анимацией
Это не то. Скрипт, который мне нужно доработать, выдает числа через определенный интервал времени. Только нужно теперь добавить анимации.
Ответить с цитированием
  #5 (permalink)  
Старый 22.10.2019, 15:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Lefseq,
???
Ответить с цитированием
  #6 (permalink)  
Старый 22.10.2019, 15:45
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

рони,
Мне нужно чтобы вот так: https://codepen.io/Mr_Sergo/pen/WNNoYvK?editors=1010

Но появление чисел с анимацией.
Ответить с цитированием
  #7 (permalink)  
Старый 22.10.2019, 15:46
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Сообщение от рони Посмотреть сообщение
лезем в гугл, делаем поиск по форуму, находим с десяток вариантов, на любой вкус с плагином, без плагина, на чистом js.
Гуглил, но пока того, что мне нужно не нашел.
Ответить с цитированием
  #8 (permalink)  
Старый 22.10.2019, 16:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Lefseq,
что такое анимация, можно пример?
Ответить с цитированием
  #9 (permalink)  
Старый 22.10.2019, 16:28
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Сообщение от рони Посмотреть сообщение
Lefseq,
что такое анимация, можно пример?
https://codepen.io/anon/pen/wxNXNa?editors=1010
Ответить с цитированием
  #10 (permalink)  
Старый 22.10.2019, 16:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Lefseq,
чем анимация из поста #3 отличается от вашего примера?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Увеличение переменной на 1 за каждые 3 числа в другой переменной Fungus Общие вопросы Javascript 5 03.07.2018 21:42
Увеличение числа в поле input каждые 5 секунд и нажатие на кнопку ArxRash Элементы интерфейса 11 31.05.2017 13:25
Плавное увеличение числа raler jQuery 5 19.01.2017 09:34
Увеличение числа параллельных ajax соединений 1lider AJAX и COMET 0 03.07.2014 17:46
Увеличение числа через заданный промежуток времени gambit88 Общие вопросы Javascript 4 04.12.2013 13:37