Как сделать так, чтобы когда пользователь выбирал из списка элемент, то выполнялся определенный код отсчета от каждого события (сколько остаётся)

Question

Например: Человек выбирает из выпадающего списка "Новый год", тогда появляется таймер сколько остается до этого события

<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>

<script>
</script>



<select name="cities" id="select">
  <option value="Summer">Лето</option>
  <option value="Spring">8 марта</option>
  <option value="Autumn">1 сентября</option>
</select>

<button id="btn">Подсчитать</button>


<script>
  const cities = document.getElementById('select');
  const btn = document.getElementById('btn');


  btn.onclick = event => {
    let checkedCityText = cities.options[cities.selectedIndex].text;
    if (checkedCityText == 'Лето') {
      //вот сюда вставить событие отсчета времени
      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);
      });
    }
    if (checkedCityText == '8 марта') {
      alert('8 марта')
    }
    if (checkedCityText == '1 сентября') {
      alert('1 сентября:')
    }
  }
</script>

Answer 1

const days = [{
  id: 1,
  title: 'День знаний',
  day: 1,
  month: 8
}, {
  id: 2,
  title: 'Новый год',
  day: 1,
  month: 1
}];

class EventDaysController {
  eventDays = days;
  intervalEvent = null;
  currentTimeout = null;
  
  onSelectOptionCalback = () => {};

  onSelectOption(option) {
    this.onSelectOptionCalback(option);
    const event = this.eventDays.find(f => f.id === +option);
    const eventDate = new Date(`${new Date().getFullYear()}-${event.month}-${event.day}`)
    if (eventDate - new Date() < 0){
      eventDate.setFullYear(new Date().getFullYear() + 1)
    }
    const timestamp = eventDate - new Date();
    this.renderTimeout(timestamp, 'timeout')
  }
  
  secondsToTime(seconds){
    const milisecond = seconds % 1000;
    seconds = (seconds - milisecond) / 1000;
    const second = seconds % 60;
    seconds = (seconds - second) / 60;
    const minute = seconds % 60;
    seconds = (seconds - minute) / 60;
    const hour = seconds % 24;
    seconds = (seconds - hour) / 24;
    const day = seconds
    return `
      ${this.declensionNum(day, ['день', 'дня', 'дней'])}
      ${this.declensionNum(hour, ['час', 'часа', 'часов'])}
      ${this.declensionNum(minute, ['минута', 'минуты', 'минут'])}
      ${this.declensionNum(second, ['секунда', 'секунды', 'секунд'])}`
  }
  
  declensionNum(num, words) {
      return `${num} ${words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]}`;
  }
  
  renderTimeout(timestamp, id){
    clearInterval(this.intervalEvent);
    this.currentTimeout = timestamp;
    const span = document.getElementById(id);
    this.intervalEvent = setInterval(() => {
      span.innerHTML = this.secondsToTime(this.currentTimeout);
      this.currentTimeout -= 1000;
    }, 1000)
  }

  renderList(selectId) {
    const selectDOM = document.getElementById(selectId);
    this.eventDays.forEach(f => {
      let option = document.createElement('option');
      option.value = f.id;
      option.innerHTML = f.title;
      selectDOM.append(option);
    })
    selectDOM.addEventListener('change', (e) => {
      this.onSelectOption(e.target.value)
    });
    this.onSelectOption(this.eventDays[0].id)
  }


}

document.addEventListener('DOMContentLoaded', function() {
  const edc = new EventDaysController();
  edc.onSelectOptionCalback = (option) => {
    if (option == 2) {
      this.getElementsByTagName('html')[0].style.background = 'red'
    } else {
      this.getElementsByTagName('html')[0].style.background = 'white'
    }
  }
  edc.renderList('eventDays');
  
});

<select id="eventDays">
</select>
<span id="timeout"></span>

БЛОГ НА HUSL

Как сделать так, чтобы когда пользователь выбирал из списка элемент, то выполнялся определенный код отсчета от каждого события (сколько остаётся)

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