Форум

LordeckiyYaya · #1 (**permalink**) 27.11.2020, 16:21

const time = 1000;
const step = 10;

function preloader(num) {
    let out = document.querySelectorAll('h1.head-p-card');
    n = 0;
    for (let i = 0; i <= 3; i++) {
        let interval = setInterval(() => {
            n = n + step;
            if (n == num) {
                clearInterval(interval);
            }
            out[i].innerHTML = n;
        })
    }
}
preloader();

Выше код, который считает до бесконечности.
Как установить (Как я понимаю) массив из 3 чисел, которые будут конечными?

То есть, чтобы счёт был только до:
В первом столбце: 800
Во втором: 500
В третьем: 900

рони · #2 (**permalink**) 27.11.2020, 17:25

LordeckiyYaya,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<h1 class="head-p-card" data-count="800"></h1>
<h1 class="head-p-card" data-count="500"></h1>
<h1 class="head-p-card" data-count="900"></h1>
<script>
const time = 5000;

function preloader() {
    let out = document.querySelectorAll('h1.head-p-card');
    out.forEach(el => {
    let count = el.dataset.count;
    let n = 0;
    let step = count/(30 * time/1000);
    el.innerHTML = n;
    let timer = () => {
    n = Math.min(n + step, count);
    el.innerHTML = n.toFixed(0);
    n >= count || setTimeout(timer, 30);
    }
    setTimeout(timer, 30);
    })
}
preloader();

</script>


</body>
</html>

LordeckiyYaya · #3 (**permalink**) 27.11.2020, 18:38

Я имел в виду, чтобы через аргумент функции.
Чтобы аргумент num был как массив, а при вызове функции написать
preloader([500,500,500]);

рони · #4 (**permalink**) 27.11.2020, 19:05

LordeckiyYaya,
а подумать чуть - чуть? строка 20 и 19

рони · #5 (**permalink**) 27.11.2020, 19:11

LordeckiyYaya,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<h1 class="head-p-card" ></h1>
<h1 class="head-p-card" ></h1>
<h1 class="head-p-card" ></h1>
<script>
function preloader(counts, time) {
    let out = document.querySelectorAll('h1.head-p-card');
    out.forEach((el, i) => {
    let count = counts[i] || el.dataset.count || 500;
    let n = 0;
    let step = count/(30 * time/1000);
    el.innerHTML = n;
    let timer = () => {
    n = Math.min(n + step, count);
    el.innerHTML = n.toFixed(0);
    n >= count || setTimeout(timer, 30);
    }
    setTimeout(timer, 30);
    })
}
preloader([100, 500, 300], 8000);

</script>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript