Динамически генерируется HTML элементы, основанные на вводе пользователя или особых условиях, являются общим требованием в веб-разработке. Одним из таких сценариев является создание раскрывающихся меню с таймером, параметры которых настраиваются в зависимости от текущего времени, желаемого диапазона и интервалов. В этой статье представлено решение на JavaScript или jQuery для создания динамических раскрывающихся списков по времени. select элемент формы.

Почему динамические раскрывающиеся списки времени?

Динамические раскрывающиеся списки времени полезны во многих ситуациях:

• Назначение встречи: Разрешите пользователям выбирать временные интервалы, которые корректируются в зависимости от доступности в реальном времени.
• Услуги бронирования: Предоставьте варианты времени для услуг, предлагаемых только в определенные часы или через определенные промежутки времени.
• Установите напоминания: Разрешите пользователям устанавливать напоминания с гибкими параметрами времени, начиная с текущего времени или в пределах указанного диапазона.
• Улучшенный пользовательский интерфейс: Предоставьте пользователям подходящий выбор времени, избегая ненужной прокрутки и путаницы.

Решение динамической синхронизации с использованием JavaScript

Приведенное ниже решение JavaScript позволяет создавать динамические раскрывающиеся меню на ваших веб-страницах. Эти меню адаптируются к различным сценариям и предоставляют пользователям подходящий выбор времени.

Вот что он предлагает:

• Гибкие временные рамки: Определите время начала и окончания для опций раскрывающегося меню. Вы даже можете использовать текущее время для динамического запуска или завершения опций в текущий момент.
• Настраиваемые интервалы: Установите интервалы между вариантами времени – каждые 15 минут, 30 минут или любую другую продолжительность.
• Различные форматы отображения: Управляйте отображением времени, выбирая между 12-часовым или 24-часовым форматом с индикаторами AM/PM по мере необходимости.
• Начните сейчас: Настройте раскрывающееся меню так, чтобы оно начиналось с текущего времени, что делает его идеальным для сценариев планирования или бронирования.
• Покрытие в течение всего дня: Если конкретный диапазон времени не указан, в раскрывающемся меню по умолчанию будут указаны параметры для всего дня.
• Умная обработка заготовок: Если на основе предоставленных параметров невозможно создать допустимые параметры времени, раскрывающийся список будет автоматически отключен, чтобы не запутать пользователя.

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

Примеры динамического времени

• Пример 1: Полный день, 30-минутные интервалы, 24-часовой формат.

• Пример 2: Начать сейчас, закончить в 20:00, интервал 15 минут, формат 12 часов.

• Пример 3: Начало в 10:00, окончание сейчас, интервал 1 час, 24-часовой формат

• Пример 4: Начать с 14:00, окончание в 18:00, интервал 10 минут, 12-часовой формат строчными буквами AM/PM

• Пример 5: Начните сейчас до полуночи с интервалом в 30 минут.

Динамическое время JavaScript

Вот полный код JavaScript для создания динамических раскрывающихся списков по времени:

function getTime(from, to, interval, startNow, format, timeSelect) { 
  var select="Select a Time";
  var now = new Date();
  var currentHour = now.getHours();
  var currentMinute = now.getMinutes();
  var optionsCount = 0; 

  if (from === "now") {
    from = currentHour;
  } else if (from === "") {
    from = 0; 
  } else {
    from = parseInt(from);
  }

  if (to === "now") {
    to = currentHour;
  } else if (to === "") {
    to = 23; 
  } else {
    to = parseInt(to);
  }

  if (startNow) {
    if (from  12 ? hour - 12 : hour;
    hour12 = hour12 === 0 ? 12 : hour12; // Change 0 to 12 for 12 AM
    var ampm = hour >= 12 ? 'PM' : 'AM';
    for (var min = 0; min ' + hour12 + ':' + min0 + ' ' + ampm + '';
      optionsCount++; 
    }
  }

  timeSelect.innerHTML = select;
  if (optionsCount = 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes 

Разделение кода

Теперь давайте разберем код для наших читателей:

1. HTML-структура:

• Мы используем элементы с классом timeSelect для создания выпадающих меню.
  Каждый select являются атрибутами данных:

  • data-from: час начала (или «сейчас»).
  • data-to: последний час (или «сейчас»).
  • data-interval: интервал в минутах.
  • data-start-now: или начать с текущего времени.
  • data-format: формат времени (например, «H:i», «h:i A»).
  ЧИТАТЬ  10 главных проблем, связанных с автоматизацией маркетинга, и как их избежать | зона Мартех

  2. Функции JavaScript:

  • getTime(from, to, interval, startNow, format, timeSelect):
    • Эта функция выполняет тяжелую работу. Он принимает параметры из атрибутов данных и select сам элемент.
    • Он рассчитывает временной диапазон на основе from и toпринимая во внимание startNow параметры и текущее время.
    • Он генерирует параметры времени с указанными interval.
    • Он форматирует значения времени, используя formatDate() функция.
    • Он заполняет данное select элемент с сгенерированными опциями.
    • Он отключает select если нет допустимых вариантов.
  • formatDate(date, format):
    • Эта вспомогательная функция форматирует объект даты в соответствии с указанной строкой формата, аналогично форматированию даты PHP.

  3. Инициализация:

  • Код выбирает все элементы с классом timeSelect с использованием querySelectorAll().
  • Затем он проходит через каждый select использование элемента forEach().
  • Каждому selectон извлекает параметры из атрибутов данных.
  • Это называется getTime() функция с параметрами и select элемент для создания и заполнения параметров.

  Динамическое время в jQuery

  Если вы используете jQuery, вот переписанное решение.

  function getTime(from, to, interval, startNow, format, $timeSelect) {
    var selectOptions="Select a Time";
    var now = new Date();
    var currentHour = now.getHours();
    var currentMinute = now.getMinutes();
    var optionsCount = 0; 
  
    if (from === "now") {
      from = currentHour;
    } else if (from === "") {
      from = 0; 
    } else {
      from = parseInt(from);
    }
  
    if (to === "now") {
      to = currentHour;
    } else if (to === "") {
      to = 23; 
    } else {
      to = parseInt(to);
    }
  
    if (startNow) {
      if (from  12 ? hour - 12 : hour;
      hour12 = hour12 === 0 ? 12 : hour12; 
      var ampm = hour >= 12 ? 'PM' : 'AM';
      for (var min = 0; min ' + hour12 + ':' + min0 + ' ' + ampm + '';
        optionsCount++; 
      }
    }
  
    $timeSelect.html(selectOptions);
    if (optionsCount = 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; 
    minutes = minutes 

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

  ЧИТАТЬ  10 биткоин-проектов с открытым исходным кодом, за которыми стоит следить в 2024 году

  Source

  
  Поиск