Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Таймер обратного отсчета (https://javascript.ru/forum/dom-window/82831-tajjmer-obratnogo-otscheta.html)

DenysV 13.07.2021 22:30

Таймер обратного отсчета
 
коллеги, нужна помощь... пишу таймер обратного отсчета... но завис на одной проблеме... помогите пожалуйста... как на странице сделать поле для ввода даты, с кнопкой сабмит, и что бы таймер реагировал на это так, что бы после ввода таймер реагировал и начинал отсчета от сейчас до даты введенной пользователем... код, какой имею на данный момент прикрепляю... помогите пожалуйста решить проблему...

HTML
<div class="timer">
<div class="timer__items">
<div class="timer__item timer__days">00</div>
<div class="timer__item timer__hours">00</div>
<div class="timer__item timer__minutes">00</div>
<div class="timer__item timer__seconds">00</div>
</div>
</div>

JS
document.addEventListener('DOMContentLoaded', function () {

const deadline = new Date(new Date().getFullYear(), new Date(), 01);

let timerId = null;

function declensionNum(num, words) {
return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
}

function countdownTimer() {
const diff = deadline - new Date();
if (diff <= 0) {
clearInterval(timerId);
}
const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;
const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0;
const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0;
const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;
$days.textContent = days < 10 ? '0' + days : days;
$hours.textContent = hours < 10 ? '0' + hours : hours;
$minutes.textContent = minutes < 10 ? '0' + minutes : minutes;
$seconds.textContent = seconds < 10 ? '0' + seconds : seconds;
$days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']);
$hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']);
$minutes.dataset.title = declensionNum(minutes, ['минута', 'минуты', 'минут']);
$seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунды', 'секунд']);
}

const $days = document.querySelector('.timer__days');
const $hours = document.querySelector('.timer__hours');
const $minutes = document.querySelector('.timer__minutes');
const $seconds = document.querySelector('.timer__seconds');

countdownTimer();

timerId = setInterval(countdownTimer, 1000);
});

Белый шум 14.07.2021 01:42

DenysV,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

ksa 14.07.2021 12:29

Цитата:

Сообщение от DenysV
нужна помощь... пишу таймер обратного отсчета...

У нас тих таймеров вагон и маленькая тележка...
https://javascript.ru/forum/search.php?searchid=441059


Часовой пояс GMT +3, время: 04:03.