Mark54
@Mark54
Web-developer

Как сделать таймер по дате?

Здравствуйте, подскажите как реализовать таймер обратного отсчета по дате, по истечению времени чтобы загорался красный цвет.
Таймер планируется размещать на 1 странице у многих объектов и соответственно, чтобы таймер работал в каждом объекте со своим указанным временем, т.е. со своим id.
  • Вопрос задан
  • 483 просмотра
Решения вопроса 1
BRAGA96
@BRAGA96
Написал для вас простенький 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());
	});

});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
Один диспетчер будет управлять этим зоопарком. Его свойство watch это массив объектов, у каждого два свойства: HTML элемент и объект Date когда истекает срок.

Таймер тикает раз в секунду (можно и 5 раз в секунду сделать). По тику обновляет оставшееся время во всех элементах, и при достижении финиша меняет цвет и удаляет объект из обоймы watch:
Код
const Clock = {
  watch: [],
  add: function(el, D) {
    this.watch.push({
    	el: el,
      D : D,
    });
    this.tick();
  },
  tick: function(){
    const now = new Date().getTime();
    for(let i = this.watch.length - 1; i>=0; i--) {
      let w = this.watch[i];
      let dt = w.D.getTime() - now;
      w.el.innerText = Math.round(dt / 1000);
      if( dt<=0 ) {
        w.el.classList.add('finished');
        this.watch.splice(i,1);
      }
    }    
  },
  timer: null,
  init: function() {
    this.timer = window.setInterval(this.tick.bind(this), 1000);
  }
};

Clock.init();

Clock.add(
  document.getElementById('obj1'),
  new Date( new Date().getTime() + 5e3)
);
Clock.add(
  document.getElementById('obj2'),
  new Date( new Date().getTime() + 7e3)
);
Clock.add(
  document.getElementById('obj3'),
  new Date( new Date().getTime() + 3e3)
);
Fiddle
Ответ написан
Комментировать
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Элементарно
Раз в секунду вызываете функцию, которая обходит все ваши объекты, для каждого вычисляет остаток времени и выводит его. Если время вышло, то дополнительно меняет класс, чтобы больше не трогать этот объект.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы