Скрипт позволяет сделать таймер для каждой новости на сайте, который бы показывал сколько осталось дней до события. Сделать отдельный таймер на странице не проблема, проблема как привязать таймер к новости. А если еще учесть что их будет не 4 не 5, а еще большее количество причём как на главной так и в полной версии новости. Вообщем разбираемся с установкой.Что потребуется?
Для реализации множества таймеров на одной странице без привязки к id блока и прочим элементам понадобится сам скрипт jQuery Countdown и прямые руки.
Что будем с этим делать?Самый простой и очевидный способ передачи данных о времени истечения таймера в скрипт — воспользоваться html5-атрибутом data-* им и воспользуемся: Главное чтобы формат даты в атрибуте data-timer должен быть таким:Год, Месяц, День, Час, Минута, СекундаВ итоге получим вот такую проверочную конструкцию:
Далее подключим к странице необходимые скрипты и библиотеки и напишем небольшой скрипт для обработки данных о счётчиках.В скрипте всё прокомментировано, так что думаю в пояснениях нет необходимости:
jQuery(document).ready(function($) {
// для всех элементов, которые имеют атрибут data-timer, выполняем следующее действие
$("[data-timer]").each(function () {
// текущий элемент, обернутый в jquery
var $this = $(this);
// Получаем описание таймера
var timerDescription = $this.prop('title');
// Если у элемента есть title - прибавляем к нему двоеточие и пробел
if (timerDescription != false) {
timerDescription = timerDescription+': ';
};
// получили строку, разбили ее по ","
var dateArr = $this.data("timer").split(",");
// элементы массива - строки, а для new Date нужны числа
dateArr = $.map(dateArr, function (elem) {
return parseInt(elem);
});
// в html пишем "человеческие" месяцы, здесь преобразуем к js-месяцам
dateArr[1]--;
// конструируем даты
var date = new Date(dateArr[0], dateArr[1], dateArr[2], dateArr[3], dateArr[4], dateArr[5]);
// инициализируем таймер
$this.countdown({
// Берём дату из заранее заготовленной
until: date,
// Определяем шаблон вывода
layout:'{desc}{d}'+
'{hn} {hl}, {mn} {ml}, {sn} {sl}',
// Определяем описание
description: timerDescription
// Ну и про язык не забываем
}, $.countdown.regional['ru']);
});
});И что дальше?Дальше качаем ниже архив с примером, изучаем как оно работает и внедряем себе на сайт.Самый простой вариант внедрить это решение в DLE — записывать значения таймеров в дополнительные поля и выводить примено вот так:
Версия DLE: 9.x
Автор: ПафНутиЙ