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

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

Решение:
Предположим, что у нас есть инфоблок «Мероприятия». Для элементов этого инфоблока создаем свойство «Дата мероприятия» с типом «Дата/время» (код «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

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

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