Как сделать отсчет до 30 сентября?

Question

[Александр Наумов]

Есть код таймера.

$(document).ready(function() {
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 12 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
});

Нужно реализовать отсчет до определенной даты(30 сентября).
Как реализовать ?

Comments

[Леонид Князев]

var deadline = new Date(2018, 8, 30);

Answer 1

[Ihor Bratukh]

Инициализация таймера:

timer({
	container: '.timer',
	date: '09/30/2018',
	template: function() {
		return `
			<div>
				<span v-time-days></span>
				:
				<span v-time-hours></span>
				:
				<span v-time-minutes></span>
				:
				<span v-time-seconds></span>
			</div>
		`;
	},
	finish: function() {
		return '<span>Время вышло</span>';
	}
});

Сама плагин-функция таймера:

function timer(options) {
	var setting = extend({
		container: '.timer',
		date: '09/30/2018',
		template: function() {},
		finish: function() {}
	}, options || {});

	var general = {
		context: document.querySelector(setting.container),
		date: new Date(setting.date).getTime(),
		time: {},
		inverval: 0
	};

	general.context.innerHTML = setting.template.call(general.context);

	initTimer();

	general.interval = setInterval(initTimer, 1e3);

	function initTimer() {
		var remaining = general.date - Date.now();
		general.time = getTimeObject(remaining);
		if (remaining <= 1e3) {
			var html = setting.finish.call(general.context);
			if (html) general.context.innerHTML = html;
			clearInterval(general.inverval);
		} else {
			changeTime(general.time);
		}
	}

	function changeTime(time) {
		['days', 'hours', 'minutes', 'seconds'].forEach(function(name) {
			[].forEach.call(general.context.querySelectorAll('[v-time-' + name + ']'), function(node) {
				if (node.innerText !== time[name]) node.innerText = time[name];
			});
		});
	}

	function getTimeObject(time) {
		return doubleDigits({
			seconds: Math.floor((time / 1e3) % 60),
			minutes: Math.floor((time / 1e3 / 60) % 60),
			hours: Math.floor((time / (1e3 * 60 * 60) % 24)),
			days: Math.floor(time / (1e3 * 60 * 60 * 24))
		});
	}

	function doubleDigits(time) {
		if (typeof time === 'object') {
			for (var item in time) {
				time[item] = time[item] < 10 ? '0' + time[item] : String(time[item]);
			}
		} else {
			time = time < 10 ? '0' + time : time;
		}
		return time;
	}

	function extend(out) {
		out = out || {};
		for (var i = 1; i < arguments.length; i++) {
			var obj = arguments[i];
			if (!obj) continue;
			for (var key in obj) {
				if (obj.hasOwnProperty(key)) {
					if (typeof obj[key] === 'object') {
						out[key] = extend(out[key], obj[key]);
					}
					else {
						out[key] = obj[key];
					}
				}
			}
		}
		return out;
	}
}