Например: Человек выбрал их списка событие 'Лето', тогда у него появляется таймер отсчета времени до 1 июня; человек вновь выбирает из списка событие, но уже другое '8 марта', тогда старый таймер удаляется, а появляется новый, показывающий сколько осталось дней до этого события (8 марта).
<!-- Показывается 1 таймер отсчета (до 1 июня): -->
<div class="timer" id="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>
<!-- Показывается 2 таймер отсчета (до 8 марта): -->
<div class="timer__two" id="timer__two">
<div class="timer__items__two">
<div class="timer__item__two days__two">00</div>
<div class="timer__item__two hours__two">00</div>
<div class="timer__item__two minutes__two">00</div>
<div class="timer__item__two seconds__two">00</div>
</div>
</div>
<!-- Показывается 3 таймер (до 1 сентября): -->
<div class="timer__three" id="timer__three">
<div class="timer__items__three">
<div class="timer__item__three days__three">00</div>
<div class="timer__item__three hours__three">00</div>
<div class="timer__item__three minutes__three">00</div>
<div class="timer__item__three seconds__three">00</div>
</div>
</div>
.timer__two{
display: none;
}
.timer__three{
display: none;
}
<!-- Список, из которого пользователь выбирает событие, чтобы узнать сколько остается дней до него: -->
<select name="cities" id="select">
<option value="Summer">Лето</option>
<option value="Spring">8 марта</option>
<option value="Autumn">1 сентября</option>
</select>
<button id="btn">Подсчитать</button>
// Это код таймера (в данном случае отсчитывающий до 1 июня)
//Нужно сделать так, чтобы в этом скрипте менялась переменная до какого числа нужно вести отсчет времени (сколько дней осталось)
//Например: если человек выбрал из событий 8 марта, то меняется код, так, чтобы велся отсчет до 8 марта, а не до какого-то другого события
document.addEventListener('DOMContentLoaded', function() {
// конечная дата
const deadline = new Date(2022, 05, 01);
// id таймера
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
countdownTimer();
// вызываем функцию countdownTimer каждую секунду
timerId = setInterval(countdownTimer, 1000);
});
const cities = document.getElementById('select');
const btn = document.getElementById('btn');
const time_one = document.getElementById('timer');
const time_two = document.getElementById('timer__two');
const time_three = document.getElementById('timer__three');
// Условия, по которым появляется нужный таймер для отсчета времени до нужного события:
btn.onclick = event => {
let checkedCityText = cities.options[cities.selectedIndex].text;
if (checkedCityText == 'Лето') {
time_one.style.display = 'block';
time_two.style.display = 'none';
time_three.style.display = 'none';
}
if (checkedCityText == '8 марта') {
time_one.style.display = 'none';
time_two.style.display = 'block';
time_three.style.display = 'none';
}
if (checkedCityText == '1 сентября') {
time_one.style.display = 'none';
time_two.style.display = 'none';
time_three.style.display = 'block';
}
}
