Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Как вывести в span текст после отсчета таймера jQuery Countdown?

Как вывести в span текст после отсчета таймера jQuery Countdown?


     28.05.2016    Все вопросы » jQuery    2403

вопрос
Реализован таймер по примеру https://dle-faq.ru/blog/4872-countdown.html, только выводится не в li а в span (не так важно, но все-таки...). Задача вывести текст вместо нулей, когда таймер выйдет.
expiryText выводит текст только после того как таймер вышел, после обновления страницы возвращает значение 0.
Не знаю как организовать через onExpiry, чтобы после обновления страницы вместо 0 дней была надпись время вышло.
Помогите пожалуйста, второй день бьюсь!

Ответил: PunPun


1. Просто вставьте тег из инструкции в элемент span.
2. После
until: date,
вставьте
expiryText: 'ваш текст после окончания счетчика',

6 комментариев

peguckashady
Юзер

peguckashady - 28 мая 2016 11:21 -

Не подходит... Счетчиков несколько.
Например:
Первый - осталось 1 день
Второй - осталось 0 дней
Смысл в том чтобы таймеры где время вышло выводили текст "Время вышло" постоянно, а expiryText выводит текст только после истечении срока, а после обновления страницы возвращает в 0.
Вроде как можно через onExpiry, но я не пойму как...

LazyDev
PHP-developer

LazyDev - 28 мая 2016 11:28 -

peguckashady, После
until: date,
вставьте
onExpiry: timexpire,

Потом после скрипта вставьте
function timexpire()
{
$("#id").text("текст об окончании");
}

Где ID это ID нужного счетчика.

Мой блог: LazyDev.pro

Помогаю с решением проблем на платной основе.

peguckashady
Юзер

peguckashady - 28 мая 2016 11:37 -

а можно прикрутить не к айди а к классу?
Таймер реализован для каждой новости определенной категории, и айди к нему не знаю как прикрутить) Извините за беспокойство, и спасибо за помощь!
ЗЫ Классный у Вас блог, частенько посещаю)

LazyDev
PHP-developer

LazyDev - 28 мая 2016 11:46 -

peguckashady, вместо #id прописать .class где после точки название класса

Мой блог: LazyDev.pro

Помогаю с решением проблем на платной основе.

peguckashady
Юзер

peguckashady - 28 мая 2016 12:55 -

Вопрос актуальный...
Скрипт
jQuery(document).ready(function($) {

    // для всех элеметов, которые имеют атрибут data-timer, выполняем следующее действие
    $("[data-timer]").each(function () {

        // текущий элемент, обернутый в jquery
        var $this = $(this);
        
        // Получаем описание таймера
        var timerDescription = $this.prop('title');
        // Если у элемента есть title - прибавляем к нему двоеточие и пробел
        if (timerDescription != false) {0
            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,
            format: 'd',
            //timezone: +180,
            // Определяем шаблон вывода
            layout:'{desc}'+ '{dn} {dl}',
            // Определяем описание
            description: timerDescription,
            onExpiry: timexpire,
            // Ну и про язык не забываем
        }, $.countdown.regional['ru']);
        

    });
    
    function timexpire(){$(".hasCountdown").text("текст об окончании");}

});

html
<span class="time" data-timer="[xfvalue_timer_year], [xfvalue_timer_month], [xfvalue_timer_day], 00, 00, 00"></span>

peguckashady
Юзер

peguckashady - 28 мая 2016 12:56 -

***Комментарий удален***

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 15.10.2011 AndreY_ZO_o  jQuery
наверх