Как сделать перебегающее не целое число js

Question

Нужно, что бы к примеру каждые 10, или 25 секунд рандомайзер выдавал рандомное не целое число(для примера: 11.75 22.96 04.72) на display, при этом цифры менялись от 0, до конечного числа(учитываю цифры после точки) Я уже мучаюсь с этим вопросом более 2 дней, все никак не выходит совместить 2 кода, вот сам код:

const time = 10000;
const step = 1;

function outNum(num, elem) {
  let e = document.querySelector("#out");
  n = 0;
  let t = Math.round(time / (num / step));
  let interval = setInterval(() => {
    n = n + step;
    if (n == num) {
      clearInterval(interval);
    }
    e.innerHTML = n;
  }, t);
}

outNum(Random, "#out");

function Random (){
    const max = 100;
    return Math.round(Math.random() * max );
}

const btn = document.getElementById("place_bet");
const disp = document.getElementById("out");

btn.onclick = function () {
    disp.innerHTML = Random();
}

Буду очень благодарен!

Answer 1

Вот пример реализации нарастающего случайного числа с рандомным увеличением значения.

// Время увеличения числа за 1 шаг(можно в параметр функции вынести)
const oneStepTime = 400;
const disp = document.getElementById("out");

function randomFloat(maxNumber, maxStep, minStep) {
  let acc = 0; // Аккумулятор
  const interval = setInterval(() => {
    // Получаем случайное число для увеличения
    let step = Math.floor((Math.random() * (maxStep - minStep) + minStep) * 100) / 100;
    // Проверям, что не вылезли за пределы
    if (maxNumber - acc > step) {
      acc += step;
    } else {
      acc = maxNumber
      clearInterval(interval); // Число полное, тормозим
    }
    disp.innerText = acc.toFixed(2);
  }, oneStepTime);
}
// Период обновления числа в секундах
function run(min, max) {
  const waitTime = (Math.random() * (max - min) + min) * 1000;
  console.log('Надо подождать', waitTime);
  setTimeout(() => {
    randomFloat(Random(), 10, 1);
    run(min, max);
  }, waitTime);
}

function Random() {
  const max = 100;
  return Math.round(Math.random() * max * 100) / 100;
}

// Первый запуск
randomFloat(Random(), 10, 1);
// Запускаем цикл обновлений
run(3, 10);

#out {
  width: 150px;
  border: 1px solid #000;
  min-height: 20px
}

<div id="out"></div>

Все параметры настраиваемые.

По комментарию

например 22.11, и с 0 по одному знаку добавлялось к числу, например (0-0.01-0.03.....0.99-1.00-1.01......1.99-2.00)

Меняем oneStepTime = 400 на нужную скорость увеличения
и let step устанавливаем в let step = 0.01

Answer 2

Если делаете анимацию, используйте requestAnimationFrame:

const counter = document.getElementById('counter').firstChild;

const countUp = () => {
    const target = 5 + 5 * Math.random();
    const start = performance.now();

    const frame = () => {
        const dt = (performance.now() - start) / 1000;
        counter.nodeValue = dt.toFixed(2);
        if (dt < target) {
            requestAnimationFrame(frame);
        } else {
            setTimeout(countUp, 1000);
        }
    };
    requestAnimationFrame(frame);
};
countUp();

<span id="counter">0</span>

БЛОГ НА HUSL

Как сделать перебегающее не целое число js

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