Как передать массив
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 |
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>
|
Я имел в виду, чтобы через аргумент функции.
Чтобы аргумент num был как массив, а при вызове функции написать preloader([500,500,500]); |
LordeckiyYaya,
а подумать чуть - чуть? строка 20 и 19 |
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>
|
| Часовой пояс GMT +3, время: 01:15. |