1

Всем привет! Помогите разобрать, как показывать не 60 минут,а что б было 00, если больше часа

const timer = document.querySelector('.timer');
let time = timer.dataset.time;
let interval;
let hours = 0;
let minutes = 0;
let seconds = 0;

function setCoundownTimer() {

    interval = setInterval(() => {
        time--

        hours = getPadTime(Math.floor(time / 3600));
        minutes = getPadTime(Math.floor(time / 60))
        seconds = getPadTime(time - minutes * 60)

        document.querySelector('.hours').innerHTML = hours
        document.querySelector('.minutes').innerHTML = minutes
        document.querySelector('.seconds').innerHTML = seconds

        if(time === 0) {
            clearInterval(interval)
        }

    }, 1000)
}

setCoundownTimer()

function getPadTime(time) {
    return time.toString().padStart(2, "0");
}
body {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.timer {
    display: flex;
    font-size: 36px;
}
.minutes {
    margin: 0 20px;
}
<div class="timer" data-time="3610">
    <div class="hours">00</div>
    <div class="minutes">00</div>
    <div class="seconds">00</div>
</div>

2
  • setInterval не будет работать раз в 1 секунду, скорее всего, если вы окно куда нить в фон переведете. Такие вещи обычно делают не отсчетом до 0, а заданием целевого времени и высчитыванием разницы при срабатывании. В текущей ситуации ваш таймер вероятнее всего будет работать дольше, чем час.
    – teran
    30 окт 2022 в 13:25
  • зы: кроме деления еще есть остаток от деления
    – teran
    30 окт 2022 в 13:26

1 ответ 1

0

Дело в том, что Вы высчитываете минуты не вычитая при этом часы. С секундами та же проблема. Правильно будет так:

const timer = document.querySelector('.timer');
let time = timer.dataset.time;
let interval;
let hours = 0;
let minutes = 0;
let seconds = 0;

function setCoundownTimer() {

  interval = setInterval(() => {
    time--;

    hours = Math.floor(time / 3600);
    minutes = Math.floor((time - hours * 3600) / 60);
    seconds = time - hours * 3600 - minutes * 60;

    document.querySelector('.hours').innerHTML = getPadTime(hours);
    document.querySelector('.minutes').innerHTML = getPadTime(minutes);
    document.querySelector('.seconds').innerHTML = getPadTime(seconds);

    if (time === 0) clearInterval(interval);

  }, 50)
}

setCoundownTimer()

function getPadTime(time) {
  return time.toString().padStart(2, "0");
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0; padding: 0;
  min-height: 100vh;
}

.timer {
  display: flex;
  font-size: 36px;
  gap: 20px;
}
<div class="timer" data-time="3710">
  <div class="hours"></div>
  <div class="minutes"></div>
  <div class="seconds"></div>
</div>

К тому же форматирование, в виде добавления лидирующих нулей, желательно применять непосредственно перед выводом, а вот все предварительные вычисления проводить как раз с числами.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.