Выводит сразу 00:00:59, а по задумке должно выводить 00:00:00 и через каждую секунду+ 1 к последней колонке

Question

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

<div class="time"><span class="hours">00</span>:<span class="minutes">00</span>:<span 
class="seconds">00</span>
</div>
<script>
    const time = document.querySelector(".time");
    const seconds = document.querySelector(".seconds");
    const minutes = document.querySelector(".minutes");
    const hours = document.querySelector(".hours");
    let s = 0;
    let m = 0;
    let h = 0;
    for (s; s <= 59; s++) {

        seconds.innerHTML = s;
    }

</script>
</body>
</html>

Answer 1

Ну например вот так - с минутами и часами уж сами разберетесь, и вам не помешало бы поспокойнее быть...

const time = document.querySelector(".time");
    const seconds = document.querySelector(".seconds");
    const minutes = document.querySelector(".minutes");
    const hours = document.querySelector(".hours");
    let s = 0;
    let m = 0;
    let h = 0;
      let timerId = setTimeout(function tick() {
      s = s + 1;
      if (s < 10) {
        seconds.innerHTML = "0" + s;
      } else {
        seconds.innerHTML = s;
      }
      timerId = setTimeout(tick, 1000);
    }, 1000);

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

<div class="time"><span class="hours">00</span>:<span class="minutes">00</span>:<span 
class="seconds">00</span>
</div>

</body>
</html>

Answer 2

Нужно учесть, что браузер не может перерисовывать страницу одновременно с непрерывным исполнением скрипта, нужно давать ему возможность для обновления в перерывах. Одна из возможностей — setTimeout и setInterval. К тому же эти функции помогут вам не мгновенно пробежать от 0 до 59, а с задержкой, приближенной к настоящей секунде.

Подробнее можно прочитать, например, тут: https://learn.javascript.ru/settimeout-setinterval

Вот один из вариантов увеличения секунд:

const seconds = document.querySelector(".seconds");
let s = 0;

const interval = setInterval(
  () => {
    if (s > 59) clearInterval(interval);
    else seconds.textContent = s++;
  },
  1000
);

<div class="time"><span class="hours">00</span>:<span class="minutes">00</span>:<span 
class="seconds">00</span>
</div>

БЛОГ НА HUSL

Выводит сразу 00:00:59, а по задумке должно выводить 00:00:00 и через каждую секунду+ 1 к последней колонке

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