Анимация чисел как в гугле (генератор случайных чисел) js

Question

набираешь в гугле "генератор случайных чисел" и там появится ну собственно поля для ввода и генерации. Подскажите пожалуйста как реализовать такую анимацию или откуда найти точно токую же (может как то можно извлекать код гугла ?)

Answer 1

Формально тут нет анимации, просто быстрая смена значений.

Алгоритм может быть следующим

получить начальное число
получить конечное
определить несколько промежуточных чисел
сменять числа начиная с начального с небольшим интервалом.

function random(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

function range(cur, next, count) {
  // ищем интервал между промежуточными значениями, если интервал слишком маленький устанавливаем 1
  var diff = Math.floor((next - cur) / count) || 1;

  // получаем промежуточные значения
  var res = [cur];
  for (var i = cur + diff; Math.abs(i - next) > Math.abs(diff); i += diff) {
    res.push(i);
  }
  res.push(next);

  return res;
}

var timer = null

function generate(min, max) {
  window.clearInterval(timer);
  var current = +out.value;
  var next = random(min, max);
  var rng = range(current, next, 25);
  timer = setInterval(() => {
    // на каждой итерации берем следующее значение, пока они не закончатся.
    out.value = rng.shift();
    if (!rng.length) window.clearInterval(timer);
  }, 10);
}

<div>
  <output id="out">0</output>
  <div>
    <div>
      Min value: <input type="text" id="minimum" value="1" />
    </div>
    <div>
      Max value: <input type="text" id="maximum" value="1000000" />
    </div>
    <div>
      <input type="button" value="Generate" onclick="generate(minimum.value, maximum.value)" />
    </div>
  </div>
</div>

БЛОГ НА HUSL

Анимация чисел как в гугле (генератор случайных чисел) js

Ответы (1 шт):