как сделать вывод чисел на экран (чтобы получился обратный таймер)

Question

html + js:

let days = 2 || document.getElementById('days');
let hours = 23 || document.getElementById('hours');
let minutes = 59 || document.getElementById('minute');
let seconds = 59 || document.getElementById('second');
setInterval(second, 1000)

function second() {
  if (seconds > 0) {
    seconds--
  }
  if (seconds == 0) {
    seconds = 59
  }
  // console.log(seconds);
}
setInterval(minute, 60000);

function minute() {
  if (minutes > 0) {
    minutes--
    // console.log(minutes);
  }
  if (minutes == 0) {
    minutes = 59;
  }
}
setInterval(hour, 3600000);

function hour() {
  if (hours > 0) {
    hours--

  }
  if (hours == 0) {
    hours = 23;
  }
  // console.log(hours);
}
setInterval(day, 86400000);

function day() {
  if (days > 0) {
    days--
  }
  // console.log(days)
}

#days {
  position: absolute;
  left: 100px;
  top: 25px;
}

#hours {
  position: absolute;
  left: 115px;
  top: 25px;
}

#minute {
  position: absolute;
  left: 140px;
  top: 25px;
}

#second {
  position: absolute;
  left: 165px;
  top: 25px;
}

<!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 id="timer">
    <p id="days">2</p>
    <p id="hours">23</p>
    <p id="minute">59</p>
    <p id="second">59</p>
  </div>
</body>

</html>

Answer 1

как сделать вывод чисел на экран (чтобы получился обратный таймер)

Что-то типа такого...

const days = document.getElementById('days');
const hours = document.getElementById('hours');
const minutes = document.getElementById('minute');
const seconds = document.getElementById('second');
const date = new Date(timer.dataset.stop)
test()
//
function test() {
  const d = Math.trunc((date - (new Date)) / 1000)
  if (d < 0) {
    console.log('Время вышло...')
    return
  }
  days.textContent = Math.trunc(d / 60 / 60 / 24)
  hours.textContent = Math.trunc(d / 60 / 60 ) % 24
  minutes.textContent = Math.trunc(d / 60 ) % 60
  seconds.textContent = d  % 60
  setTimeout(test, 1000)
}

#timer {
  position: absolute;
  left: 100px;
  top: 25px;
  display: flex;
  gap: 10px;
}

<!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 id="timer" data-stop='2024-12-31T23:59:59'>
    <p id="days">2</p>
    <p id="hours">23</p>
    <p id="minute">59</p>
    <p id="second">59</p>
  </div>
</body>

</html>

БЛОГ НА HUSL

как сделать вывод чисел на экран (чтобы получился обратный таймер)

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