0

Например: Человек выбрал их списка событие 'Лето', тогда у него появляется таймер отсчета времени до 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> 

<style>
    .timer__two{
        display: none;
    }
    .timer__three{
        display: none;
    }
</style>

  <!-- Список, из которого пользователь выбирает событие, чтобы узнать сколько остается дней до него: -->

  <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 марта, а не до какого-то другого события -->

  <script>
    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);
    });
  </script>

  
  <script>
    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';
      }
    }
  </script>
4
  • Мне непонятно, что именно вызвало у вас сложность? код ведь вами написан? 22 апр 2022 в 14:14
  • Я не понимаю как сделать так, чтобы менялся код для каждого из событий
    – shkarol
    22 апр 2022 в 14:16
  • А вот этот код и следующий далее что делает? let checkedCityText = cities.options[cities.selectedIndex].text 22 апр 2022 в 14:17
  • selectedIndex, из которого состоит checkedCityText, показывает порядковый номер первого выбранного элемента <option>
    – shkarol
    22 апр 2022 в 14:20

1 ответ 1

1
<style>
    .timer__two{
        display: none;
    }
    .timer__three{
        display: none;
    }
</style>
<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> 
<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>
    var deadline = new Date(2022, 05, 01);
    let timerId = null;
    document.addEventListener('DOMContentLoaded', function() {
      // склонение числительных
      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);
    });
  </script>

  
  <script>
    const cities = document.getElementById('select');
    const btn = document.getElementById('btn');
  
    btn.onclick = event => {
      let checkedCityText = cities.options[cities.selectedIndex].text;
      if (checkedCityText == 'Лето') {
        deadline = new Date(2022, 05, 01);
      }
      if (checkedCityText == '8 марта') {
        deadline = new Date(2022, 08, 02);
      }
      if (checkedCityText == '1 сентября') {
        deadline = new Date(2022, 09, 01);
      }
    }
</script>
4
  • не работает почему-то :(
    – shkarol
    22 апр 2022 в 14:33
  • Может я куда-то не туда вставляю?
    – shkarol
    22 апр 2022 в 14:34
  • Код целиком, вырезал ненужные апендиксы 22 апр 2022 в 14:39
  • Работает! Спасибо вам большое! Не мог найти решение уже несколько дней! Удачи! ;)
    – shkarol
    22 апр 2022 в 14:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.