Как исправить баг с наложением чисел?

Question

Вот мой код:

const oneStepTime = 10;
const disp = document.getElementById("num1avi");
const timerDisp = document.getElementById("timer");

function randomFloat(maxNumber, maxStep, minStep) {
  let acc = 1.00;
  const interval = setInterval(() => {
    let step = 0.01;
    if (maxNumber - acc > step) {
      acc += step;
    } else {
      acc = maxNumber;
      clearInterval(interval);
      run();
    }
    disp.innerText = acc.toFixed(2);
  }, oneStepTime);

}

function run() {
  let count = 10;
  const countdownInterval = setInterval(() => {
    timerDisp.innerText = count;
    count--;
    if (count < 0) {
      clearInterval(countdownInterval);
      timerDisp.innerText = '';
      randomFloat(Random(), 10, 1);
    }
  }, 1000);
}

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


run(3, 10);

#timer { 
position: absolute;
width: 300px; 
height: 69px; 
top: 320px; 
left: 960px; 
color: #000000; 
font-family: "Saira Semi Condensed", sans-serif; 
font-weight: 600; 
font-size: 70px; 
text-align: center;
 } 
#num1avi { 
position: absolute; 
width: 300px; 
height: 69px; 
top: 320px; 
left: 960px; 
/*background-color: #870D33;*/ 
color: 000000; 
font-family: "Saira Semi Condensed",sans-serif; 
font-weight: 600; 
font-size: 70px; 
text-align: center; 
}

<div id="num1avi"></div>
<div id="timer"></div>

Answer 1

Чтобы вписать единицу, как минимальное число в функцию Random() нужно её указать и изменить формулу расчёта. Если нужно чтобы позиция элементов с id num1avi и timer была в одном и том же месте и при этом числа не накладывались друг на друга, нужно очищать текст в num1avi это можно сделать добавив задержку через setTimeout. Можно в css убрать position: absolute; удалить задержку setTimeout(()=>{},500) из этого примера и оставить disp.innerText = ""; run(); после clearInterval(interval); в функции randomFloat чтобы числа выводились одно под другим.

const oneStepTime = 3;
const disp = document.getElementById("num1avi");
const timerDisp = document.getElementById("timer");

function randomFloat(maxNumber, maxStep, minStep) {
  let acc = 1.00;
  const interval = setInterval(() => {
    let step = 0.01;
    if (maxNumber - acc > step) {
      acc += step;
    } else {
      acc = maxNumber;
      clearInterval(interval);
      setTimeout(() => {
        disp.innerText = "";
        run();
      }, 500)
    }
    disp.innerText = acc.toFixed(2);
  }, oneStepTime);

}

function run() {
  let count = 3;
  const countdownInterval = setInterval(() => {
    timerDisp.innerText = count;
    count--;
    if (count < 0) {
      clearInterval(countdownInterval);
      timerDisp.innerText = '';
      randomFloat(Random(), 10, 1);
    }
  }, 1000);
}

function Random() {
  const min = 1;
  const max = 5;
  return Math.round((Math.random() * (max - min) + min) * 100) / 100;
}


run(3, 10);

#timer {
  position: absolute;
  width: 300px;
  height: 69px;
  /*top: 320px; 
    left: 960px;*/
  color: #000000;
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: 600;
  font-size: 70px;
  text-align: center;
}

#num1avi {
  position: absolute;
  width: 300px;
  height: 69px;
  /*top: 320px; 
    left: 960px;*/
  /*background-color: #870D33;*/
  color: 000000;
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: 600;
  font-size: 70px;
  text-align: center;
}

<div id="num1avi"></div>
<div id="timer"></div>

БЛОГ НА HUSL

Как исправить баг с наложением чисел?

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