Технический сбой

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

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


     Все вопросы » jQuery    2337

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

Ответил: PunPun


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

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

peguckashady
Юзер

peguckashady - -

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

LazyDev
PHP-developer

LazyDev - -

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

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

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

Мой блог: LazyDev.pro

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

peguckashady
Юзер

peguckashady - -

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

LazyDev
PHP-developer

LazyDev - -

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

Мой блог: LazyDev.pro

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

peguckashady
Юзер

peguckashady - -

Вопрос актуальный...
Скрипт
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 - -

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

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

 15.10.2011 AndreY_ZO_o  jQuery
наверх