Написал для вас простенький jQuery плагин. Если честно, то больше времени писал документацию, чем сам плагин.
Codepen.io
Если что, спрашивайте, объясню все моменты.
Использовать примерно так:
$(function() {
// Таймер с настройками по умолчанию
$('.timer').timer();
// Таймер со своими настройками, простой-быстрый вариант
// Аргументы: Дата, функция вывода, функция финиша или объект настроек
$('.timer1').timer('07.25.2018', function(time) {
return '<div>'+ time.seconds.value +'</div>';
});
// Таймер с простой инициализацией с функцией финиша
$('.timer2').timer('07.25.2018', function(time) {
return '<div>'+ time.seconds.value +'</div>';
}, function() {
$(this).css('color', 'red');
});
// Таймер с простой инициализацией с объектом настроек
$('.timer3').timer('07.25.2018', function(time) {
return '<div>'+ time.seconds.value +'</div>';
}, {
double: false,
finish: function() {
$(this).css('color', 'red');
}
});
// Таймер со своими настройками стандартный-полный вариант
$('.timer4').timer({
date: '07.25.2018',
double: false,
language: 'EN',
template: function(time) {
return '<div>'+ time.seconds.value + ' ' + time.seconds.text +'</div>';
},
finish: function() {
return 'Время вышло';
}
});
// Таймер с хранилищем store и шаблонизатором
// Store это функция которая возвращает объект общих данных, состояний,
// который можно изменять по клику, событию и т.д.
// Все параметры, строки, значения, функции, объекты и т.д., которые вы хотели бы изменять сохраняйте в хранилище
$('.timer5').timer({
date: '07.25.2018',
store: function() {
return {
text: true,
number: 10,
declen: ['осталось', 'осталась', 'осталось']
};
},
template: function(time, store) {
var text = '<div v-show="text">До конца акции '+ $.timer('declen', store.declen, time.seconds.value, 'RU') +':</div>';
var cond = '<div v-if="'+( store.number < 2 )+'">Этот текст выведется если условие сработает</div>';
var condels = '<div v-else>Текст выведтся если соседний блок IF не прошел условие</div>';
var hide = '<div v-hide>Просто блок скрытый с помощью style="display:none;"</div>'
return '<div>'+ text + time.seconds.value + ' ' + time.seconds.text + cond + condels + hide +'</div>';
}
});
// Шаблонизатор имеет такие дерективы
// Шаблонизатор работает в функция template и finish, если
// эти функции не возвращают значение, то шаблонизатор работать не будет
// Вы можете напряму из функции template или finish вставлять результат в DOM таким образом:
// $(this).html('<div>Ваш код</div>');
// v-show="key" - принимет свойство объекта store, если оно равно false/null/undefined/'' то блок не выведется
// v-if="conditions/key" - принимает любую строку или ключ объекта store (как v-show), проверяет если она false/null/undefined/'',
// то блок не выводится, если есть соседний блок v-else, то выведет его
// v-else - если соседний блок v-if не сработал, то выведется содержимое v-else
// v-hide - просто ставить style="display:none;" указаному блоку
// В консоли или в коде по каким-то событиям вы можете реактивно изменять параметры плагина так и хранилища store
// Изменим Store
$('.timer5').timer('store', {
text: false,
number: 1
// });
// Изменим параметры плагина
$('.timer5').timer('set', 'language', 'EN');
// или
$('.timer5').timer('set', {
language: 'EN'
});
// Получим параметры плагина
var date = $('.timer5').timer('get', 'date');
// Пользовательские методы
// Это те методы, которые можно использовать и без инициализации, они нужны для унификации
// так как очень часто могу встречатся во мноих инициализациях плагина
// Вызываются методы так: $.timer(название, параметры);
// Методы всегда возвращают значение
// Склонения слов
// Параметры: массив вариантов склонений, значение, язык (по умолнчанию RU)
$.timer('declen', ['осталось', 'осталась', 'осталось'], 1, 'RU');
// Пример выведет слово "осталась" - осталась 1 секунда, во всех остальных случаях "осталось"
$.timer('declen', ['day', 'days'], 1, 'EN');
// Пример выведет слово "day" - 1 day, во всех остальных случаях "days"
// Разрушим плагин
$('.timer5').timer('destroy');
// Посмотрим версию плагина
$().timer('version');
// или
$.timer('version');
$('#lang').on('change', function() {
$('.timer5').timer('set', 'language', $(this).val());
});
});
