Преобразование Date( )

Question

Пытаюсь разобраться в Js + React. Делаю первые шаги.

Хочу написать таймер обратного отсчёта даты. Предположил, что дату буду вводить в админке, поэтому в функцию она будет попадать в виде строки. По факту, после вычислений получаю интересную историю. Помещаю в HTML:

<span id='days' className='days_num'>{getTimeRemaiing()}</span>

И браузер говорит = NaN, в то время как консоль утверждает, что это number, то есть число. Ошибок консоль не выдаёт, но и NaN вместо красивых циферок на странице не хочется видеть. Функция находится в функциональном компоненте.

const Main = function(){

    const deadline = '2024-05-09';

    function getTimeRemaiing(endtime){
        
        const t = Date.parse(endtime) - Date.parse( new Date()),
            days = Math.floor(t / (1000 * 60 * 60 *24));
            console.log(typeof(days))

        return days
    }

Answer 1

const dateString = "2024-05-09";

const [year, month, day] = dateString.split("-");

const countDownDate = new Date(year, month - 1, day).getTime();

const x = setInterval(() => {
    const now = new Date().getTime();
    const distance = countDownDate - now;
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

    document.getElementById("countdown").innerHTML = `${days} суток, ${hours} часов, ${minutes} минут`;

    if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown").innerHTML = "Время истекло!";
    }
}, 1000);

#countdown {
    font-size: 1.5em;
    text-align: center;
    margin: 20px;
}

<div id="countdown"></div>

Предлагаю такой пример таймера обратного отсчета даты

БЛОГ НА HUSL

Преобразование Date( )

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