Статьи

Элемент выделения jQuery, основанный на текущей дате и времени

Январь 22, 2019

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

set-current-datetimestamp

Функция $ .dateTimeHighlightNow () 

/**
  * $.dateTimeHighlightNow()
  * Author: Sam Deering
  * Adds/removes a selected class on elements based on the current date and time.
  * usage: $('.program p').dateTimeHighlightNow();
  */
jQuery.fn.dateTimeHighlightNow = function()
{
    return this.each(function()
    {
        var datetimestamp = Math.round(new Date().getTime() / 1000)
            elem = $(this),
            start = elem.attr('start'),
            finish= elem.attr('finish');

            log('datetimestamp = '+datetimestamp);

        if (start < datetimestamp && finish > datetimestamp)
        {
            elem.addClass('selected');
            log(elem);
        }
        else
        {
            elem.removeClass('selected');
        }

    });
};

Использование: 

 $('.program p').dateTimeHighlight();

Ваш HTML-код должен выглядеть примерно так:
program-times

Дальнейшее использование может быть для запуска события каждые 1 минуту (или около того) для автоматического обновления: 

 /* monitor for auto change of current active session based on date/time */
setInterval(function()
{
    //run every minute
    $('.program p').dateTimeHighlight();
}, 60000);

Еще дальше мысли

  • PHP timestamp выполняется на стороне сервера (системные часы вашего сервера).
  • Отметка времени JavaScript выполняется на стороне клиента (системные часы вашего компьютера).
  • Дальнейшая проверка для преобразования настроек часового пояса клиентов на серверы для выделения текущего сеанса (это то, что я могу рассмотреть в ближайшем будущем, так что следите за обновлениями).

33
Share: