Skip to content

Instantly share code, notes, and snippets.

@c3ry5
Created October 20, 2014 14:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save c3ry5/d53e993951cf1c9d12bf to your computer and use it in GitHub Desktop.
Save c3ry5/d53e993951cf1c9d12bf to your computer and use it in GitHub Desktop.
body {
background: #000;
}
.countdown {
background: #000;
color: #fff;
display: table;
margin: 0 auto;
text-align: center;
font-family: arial;
}
.countdown__section {
display: table-cell;
padding: 10px;
font-weight: bold;
}
.countdown__section[data-countdown__section--value]:before {
content: attr(data-countdown__section--value);
font-size: 55px;
display: block;
}
.countdown__section[data-countdown__section--value]:after {
content: attr(data-countdown__section--type);
font-size: 12px;
color: #888;
text-transform: uppercase;
}
<div class="countdown" data-countdown-options="{'endDate': 'Wed Nov 16 2014 14:17:44 GMT'}">
<div class="countdown__section" data-countdown__section--type="days"></div>
<div class="countdown__section" data-countdown__section--type="hours"></div>
<div class="countdown__section" data-countdown__section--type="minutes"></div>
<div class="countdown__section" data-countdown__section--type="seconds"></div>
<noscript>Wed Nov 16 2014 14:17:44 GMT</noscript>
</div>
(function ($, window, document, undefined) {
var countDown = function (elem, options) {
this.elem = elem;
this.$elem = $(elem);
this.domElements = {
$dateSection: this.$elem.find('.countdown__section')
};
this.dateCalculations = {
currentDate: (new Date).getTime(),
second: 1E3,
minute: 1E3 * 60,
hour: 1E3 * 60 * 60,
day: 1E3 * 60 * 60 * 24
};
this.defaults = {
threshold: 2,
testPage: document.location,
maxDays: 730 /* 2 years default*/
};
this.options = options;
this.metadata = JSON.parse((this.$elem.data("countdown-options") || "{'':''}").replace(/'/g, '"'));
this.config = $.extend({}, this.defaults, this.options, this.metadata);
};
countDown.prototype = {
init: function () {
var _this = this;
this.dateCalculations.endDate = (new Date(this.config.endDate)).getTime();
this.getCurrentTime(function (time) {
_this.dateCalculations.startDate = (new Date(time)).getTime();
_this.timer = setInterval(function () {
_this.showRemaining();
}, _this.dateCalculations.second);
});
},
getCurrentTime: function (callback) {
var _this = this;
$.ajax({
type: "GET",
url: _this.config.testPage,
success: function (data, textStatus, jqXHR) {
var serverTime = (new Date(jqXHR.getResponseHeader("date"))).getTime(),
timeDifference = serverTime - _this.dateCalculations.currentDate,
finalTime = timeDifference > _this.config.threshold ? new Date(serverTime + serverTime) : new Date(serverTime - timeDifference);
callback.call(this, finalTime);
}
});
},
showRemaining: function () {
var _this = this,
dateDifference = _this.dateCalculations.endDate - _this.dateCalculations.startDate,
current = {
days: Math.floor(dateDifference / _this.dateCalculations.day),
hours: Math.floor(dateDifference % _this.dateCalculations.day / _this.dateCalculations.hour),
minutes: Math.floor(dateDifference % _this.dateCalculations.hour / _this.dateCalculations.minute),
seconds: Math.floor(dateDifference % _this.dateCalculations.minute / _this.dateCalculations.second)
},
dataValue;
if (current.days > this.config.maxDays) {
clearInterval(_this.timer);
return;
}
if (this.config.debug) {
console.debug('Start: ' + new Date(_this.dateCalculations.startDate));
console.debug('End: ' + new Date(_this.dateCalculations.endDate));
console.debug('Current Object: ' + current);
}
this.domElements.$dateSection.each(function (key, value) {
dataValue = $(this).data('countdown__section--type'),
val = current[dataValue] > 0 ? current[dataValue] : 0;
$(this).attr('data-countdown__section--value', val.toString().length == 1 ? '0' + val : val);
});
if (dateDifference < 0) {
clearInterval(_this.timer);
return;
}
_this.dateCalculations.startDate = _this.dateCalculations.startDate + _this.dateCalculations.second;
}
};
$.fn.countDown = function (options) {
return this.each(function () {
if (!$.data(this, "countDown")) {
$.data(this, "countDown", (new countDown(this, options)).init());
} else {
return $.data(this, "countDown");
}
});
};
window.countDown = countDown;
$(document).ready(function () {
$(".countdown").countDown();
});
})(jQuery, window, document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment