Счетчик обратного отсчета в «Списке новостей»

Как вывести один, последний элемент инфоблока с помощью «Список новостей» и добавить к нему счетчик обратного отсчета, а данные для счетчика брать из свойства элемента?

Решение:
Предположим, что у нас есть инфоблок «Мероприятия». Для элементов этого инфоблока создаем свойство «Дата мероприятия» с типом «Дата/время» (код «TIME_EVENT»), это свойство нам понадобится для счетчика.
Скачаем js-скрипт для счетчика http://hilios.github.io/jQuery.countdown/.
С помощью компонента «Список новостей» выведем последний элемент инфоблока «Мероприятия» (в параметрах компонента укажем, что на странице должна быть одна новость, сортировка – по убыванию даты начала активности). Также, в настройках компонента выберем (в разделе «Источник данных») свойство «Дата мероприятия» «TIME_EVENT».
Скопируем данный компонент в свой шаблон сайта и в шаблоне компонента, в той части, где выводится дата укажем код:
     <?foreach($arItem["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
	     <div class="event__date">
		     <?if($pid == "TIME_EVENT"):?> // Для свойства элемента с кодом TIME_EVENT
			     <?$eventDate = MakeTimeStamp($arProperty["VALUE"]);?> // Конвертируем его значение из строки в Unix-формат
			     <?$countdown = FormatDate("Y"."/"."m"."/"."d", $eventDate);?> // Форматируем дату так, как требует это скрипт
			     <?=FormatDate("d F Y"." в "."H:i", $eventDate);?> // Если нужно, то можно вывести дату из свойства на страницу в нужном формате
		     <?endif?>
	     </div>
     <?endforeach;?>
     <!-- Блок для счетчика -->
     <div class="event__counter" data-start-date="<?=$countdown;?>"></div> // Это блок, в который будет вставлен счетчик, а в атрибут «data-start-date» передано значение переменной «$countdown»

В отдельном js-файле, укажем код скрипта для инициализации счетчика:
$(document).ready(function() {
     $('.event__counter').countdown($('.event__counter').attr('data-start-date'), function(event) {
     // Код для склонения значений даты 
         function declination(titles, number) {
             var cases = [2, 0, 1, 1, 1, 2];
              return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];
         }
         var weeks = event.offset.weeks,
             days = event.offset.days,
             hours = event.offset.hours,
             minutes = event.offset.minutes;
         var ww = declination(['Неделя','Недели','Недель'], weeks),
             dd = declination(['День','Дня','Дней'], days),
             hh = declination(['Час','Часа','Часов'], hours),
             mm = declination(['Минута','Минуты','Минут'], minutes);

     // Формат вывода данных счетчика
         var $this = $(this).html(event.strftime(''
             + '' + weeks + ww + ' '
             + '' + days + dd +' '
             + '' + hours + hh +' '
             + '' + minutes + mm +' '
         ));
     });
});

22.10.2017

Рекомендую почитать :

Вывод блоков только на определенных страницах сайта
Иногда необходимо для определенных страниц сайта вывести дополнительные блоки с информацией, как это сделать? Решение: Для этого необходимо прос...
Добавить в ручную подпункт в подменю (Битрикс)
Что делать, когда необходимо добавить новый подпункт в подменю в ручную? Решение: Создадим файл для вывода подменю, например «.left.menu_ext....
Отключить переходы по пунктам главного меню на мобильных
Как отключить возможность переходить по ссылкам главного меню на мобильных устройствах? Решение: Для этого необходимо отредактировать стандартн...
Фильтрация элементов по полю «Привязка к элементам»
Как отфильтровать элементы инфоблока по множественному полю «Привязка к элементам»? Решение: Предположим, что у нас есть три инфоблока: – расп...
Скрипт для отсчета времени до конца акции
Необходимо разместить на сайте скрипт обратного отсчета. Решение: Для этого необходимо указать следующий html код: <span class="deal-e...
Сменить формат даты в CMS «Битрикс»
Необходимо вывести поле «Начало активности (дата)» элемента инфоблока в формате 02 июня, 2016. Решение: Для этого необходимо указать следующий ...