Javascript Counter beispiele
4 Verschiedene PHP / Javascript Counter Beispiele
Der hier verwendete Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
(function($) {
var useWindow = window;
// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) {
Object.keys = (function() {
'use strict';
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
dontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
],
dontEnumsLength = dontEnums.length;
return function(obj) {
if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
throw new TypeError('Object.keys called on non-object');
}
var result = [], prop, i;
for (prop in obj) {
if (hasOwnProperty.call(obj, prop)) {
result.push(prop);
}
}
if (hasDontEnumBug) {
for (i = 0; i < dontEnumsLength; i++) {
if (hasOwnProperty.call(obj, dontEnums[i])) {
result.push(dontEnums[i]);
}
}
}
return result;
};
}());
}
// Used to disable some features on IE8
var limited_mode = false;
var tick_duration = 200; // in ms
var debug = (location.hash === "#debug");
function debug_log(msg) {
if (debug) {
console.log(msg);
}
}
var allUnits = ["Days", "Hours", "Minutes", "Seconds"];
var nextUnits = {
Seconds: "Minutes",
Minutes: "Hours",
Hours: "Days",
Days: "Years"
};
var secondsIn = {
Seconds: 1,
Minutes: 60,
Hours: 3600,
Days: 86400,
Months: 2678400,
Years: 31536000
};
/**
* Converts hex color code into object containing integer values for the r,g,b use
* This function (hexToRgb) originates from:
* http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
* @param {string} hex color code
*/
function hexToRgb(hex) {
// Verify already RGB (e.g. "rgb(0,0,0)") or RGBA (e.g. "rgba(0,0,0,0.5)")
var rgba = /^rgba?\(([\d]+),([\d]+),([\d]+)(,([\d\.]+))?\)$/;
if(rgba.test(hex)) {
var result = rgba.exec(hex);
return {
r: parseInt(result[1]),
g: parseInt(result[2]),
b: parseInt(result[3]),
a: parseInt(result[5] ? result[5] : 1)
};
}
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function isCanvasSupported() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
function guid() {
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
function parse_date(str) {
var match = str.match(/^[0-9]{4}-[0-9]{2}-[0-9]{2}\s[0-9]{1,2}:[0-9]{2}:[0-9]{2}$/);
if (match !== null && match.length > 0) {
var parts = str.split(" ");
var date = parts[0].split("-");
var time = parts[1].split(":");
return new Date(date[0], date[1] - 1, date[2], time[0], time[1], time[2]);
}
// Fallback for different date formats
var d = Date.parse(str);
if (!isNaN(d))
return d;
d = Date.parse(str.replace(/-/g, '/').replace('T', ' '));
if (!isNaN(d))
return d;
// Cant find anything
return new Date();
}
function parse_times(diff, old_diff, total_duration, units, floor) {
var raw_time = {};
var raw_old_time = {};
var time = {};
var pct = {};
var old_pct = {};
var old_time = {};
var greater_unit = null;
for(var i = 0; i < units.length; i++) {
var unit = units[i];
var maxUnits;
if (greater_unit === null) {
maxUnits = total_duration / secondsIn[unit];
}
else {
maxUnits = secondsIn[greater_unit] / secondsIn[unit];
}
var curUnits = (diff / secondsIn[unit]);
var oldUnits = (old_diff / secondsIn[unit]);
if(floor) {
if(curUnits > 0) curUnits = Math.floor(curUnits);
else curUnits = Math.ceil(curUnits);
if(oldUnits > 0) oldUnits = Math.floor(oldUnits);
else oldUnits = Math.ceil(oldUnits);
}
if (unit !== "Days") {
curUnits = curUnits % maxUnits;
oldUnits = oldUnits % maxUnits;
}
raw_time[unit] = curUnits;
time[unit] = Math.abs(curUnits);
raw_old_time[unit] = oldUnits;
old_time[unit] = Math.abs(oldUnits);
pct[unit] = Math.abs(curUnits) / maxUnits;
old_pct[unit] = Math.abs(oldUnits) / maxUnits;
greater_unit = unit;
}
return {
raw_time: raw_time,
raw_old_time: raw_old_time,
time: time,
old_time: old_time,
pct: pct,
old_pct: old_pct
};
}
var TC_Instance_List = {};
function updateUsedWindow() {
if(typeof useWindow.TC_Instance_List !== "undefined") {
TC_Instance_List = useWindow.TC_Instance_List;
}
else {
useWindow.TC_Instance_List = TC_Instance_List;
}
initializeAnimationFrameHandler(useWindow);
};
function initializeAnimationFrameHandler(w) {
var vendors = ['webkit', 'moz'];
for (var x = 0; x < vendors.length && !w.requestAnimationFrame; ++x) {
w.requestAnimationFrame = w[vendors[x] + 'RequestAnimationFrame'];
w.cancelAnimationFrame = w[vendors[x] + 'CancelAnimationFrame'];
}
if (!w.requestAnimationFrame || !w.cancelAnimationFrame) {
w.requestAnimationFrame = function(callback, element, instance) {
if (typeof instance === "undefined")
instance = {data: {last_frame: 0}};
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - instance.data.last_frame));
var id = w.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
instance.data.last_frame = currTime + timeToCall;
return id;
};
w.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
};
var TC_Instance = function(element, options) {
this.element = element;
this.container;
this.listeners = null;
this.data = {
paused: false,
last_frame: 0,
animation_frame: null,
interval_fallback: null,
timer: false,
total_duration: null,
prev_time: null,
drawn_units: [],
text_elements: {
Days: null,
Hours: null,
Minutes: null,
Seconds: null
},
attributes: {
canvas: null,
context: null,
item_size: null,
line_width: null,
radius: null,
outer_radius: null
},
state: {
fading: {
Days: false,
Hours: false,
Minutes: false,
Seconds: false
}
}
};
this.config = null;
this.setOptions(options);
this.initialize();
};
TC_Instance.prototype.clearListeners = function() {
this.listeners = { all: [], visible: [] };
};
TC_Instance.prototype.addTime = function(seconds_to_add) {
if(this.data.attributes.ref_date instanceof Date) {
var d = this.data.attributes.ref_date;
d.setSeconds(d.getSeconds() + seconds_to_add);
}
else if(!isNaN(this.data.attributes.ref_date)) {
this.data.attributes.ref_date += (seconds_to_add * 1000);
}
};
TC_Instance.prototype.initialize = function(clear_listeners) {
// Initialize drawn units
this.data.drawn_units = [];
for(var i = 0; i < Object.keys(this.config.time).length; i++) {
var unit = Object.keys(this.config.time)[i];
if (this.config.time[unit].show) {
this.data.drawn_units.push(unit);
}
}
// Avoid stacking
$(this.element).children('div.time_circles').remove();
if (typeof clear_listeners === "undefined")
clear_listeners = true;
if (clear_listeners || this.listeners === null) {
this.clearListeners();
}
this.container = $("<div>");
this.container.addClass('time_circles');
this.container.appendTo(this.element);
// Determine the needed width and height of TimeCircles
var height = this.element.offsetHeight;
var width = this.element.offsetWidth;
if (height === 0)
height = $(this.element).height();
if (width === 0)
width = $(this.element).width();
if (height === 0 && width > 0)
height = width / this.data.drawn_units.length;
else if (width === 0 && height > 0)
width = height * this.data.drawn_units.length;
// Create our canvas and set it to the appropriate size
var canvasElement = document.createElement('canvas');
canvasElement.width = width;
canvasElement.height = height;
// Add canvas elements
this.data.attributes.canvas = $(canvasElement);
this.data.attributes.canvas.appendTo(this.container);
// Check if the browser has browser support
var canvasSupported = isCanvasSupported();
// If the browser doesn't have browser support, check if explorer canvas is loaded
// (A javascript library that adds canvas support to browsers that don't have it)
if(!canvasSupported && typeof G_vmlCanvasManager !== "undefined") {
G_vmlCanvasManager.initElement(canvasElement);
limited_mode = true;
canvasSupported = true;
}
if(canvasSupported) {
this.data.attributes.context = canvasElement.getContext('2d');
}
this.data.attributes.item_size = Math.min(width / this.data.drawn_units.length, height);
this.data.attributes.line_width = this.data.attributes.item_size * this.config.fg_width;
this.data.attributes.radius = ((this.data.attributes.item_size * 0.8) - this.data.attributes.line_width) / 2;
this.data.attributes.outer_radius = this.data.attributes.radius + 0.5 * Math.max(this.data.attributes.line_width, this.data.attributes.line_width * this.config.bg_width);
// Prepare Time Elements
var i = 0;
for (var key in this.data.text_elements) {
if (!this.config.time[key].show)
continue;
var textElement = $("<div>");
textElement.addClass('textDiv_' + key);
textElement.css("top", Math.round(0.35 * this.data.attributes.item_size));
textElement.css("left", Math.round(i++ * this.data.attributes.item_size));
textElement.css("width", this.data.attributes.item_size);
textElement.appendTo(this.container);
var headerElement = $("<h4>");
headerElement.text(this.config.time[key].text); // Options
headerElement.css("font-size", Math.round(this.config.text_size * this.data.attributes.item_size));
headerElement.appendTo(textElement);
var numberElement = $("<span>");
numberElement.css("font-size", Math.round(this.config.number_size * this.data.attributes.item_size));
numberElement.appendTo(textElement);
this.data.text_elements[key] = numberElement;
}
this.start();
if (!this.config.start) {
this.data.paused = true;
}
// Set up interval fallback
var _this = this;
this.data.interval_fallback = useWindow.setInterval(function(){
_this.update.call(_this, true);
}, 100);
};
TC_Instance.prototype.update = function(nodraw) {
if(typeof nodraw === "undefined") {
nodraw = false;
}
else if(nodraw && this.data.paused) {
return;
}
if(limited_mode) {
//Per unit clearing doesn't work in IE8 using explorer canvas, so do it in one time. The downside is that radial fade cant be used
this.data.attributes.context.clearRect(0, 0, this.data.attributes.canvas[0].width, this.data.attributes.canvas[0].hright);
}
var diff, old_diff;
var prevDate = this.data.prev_time;
var curDate = new Date();
this.data.prev_time = curDate;
if (prevDate === null)
prevDate = curDate;
// If not counting past zero, and time < 0, then simply draw the zero point once, and call stop
if (!this.config.count_past_zero) {
if (curDate > this.data.attributes.ref_date) {
for(var i = 0; i < this.data.drawn_units.length; i++) {
var key = this.data.drawn_units[i];
// Set the text value
this.data.text_elements[key].text("0");
var x = (i * this.data.attributes.item_size) + (this.data.attributes.item_size / 2);
var y = this.data.attributes.item_size / 2;
var color = this.config.time[key].color;
this.drawArc(x, y, color, 0);
}
this.stop();
return;
}
}
// Compare current time with reference
diff = (this.data.attributes.ref_date - curDate) / 1000;
old_diff = (this.data.attributes.ref_date - prevDate) / 1000;
var floor = this.config.animation !== "smooth";
var visible_times = parse_times(diff, old_diff, this.data.total_duration, this.data.drawn_units, floor);
var all_times = parse_times(diff, old_diff, secondsIn["Years"], allUnits, floor);
var i = 0;
var j = 0;
var lastKey = null;
var cur_shown = this.data.drawn_units.slice();
for (var i in allUnits) {
var key = allUnits[i];
// Notify (all) listeners
if (Math.floor(all_times.raw_time[key]) !== Math.floor(all_times.raw_old_time[key])) {
this.notifyListeners(key, Math.floor(all_times.time[key]), Math.floor(diff), "all");
}
if (cur_shown.indexOf(key) < 0)
continue;
// Notify (visible) listeners
if (Math.floor(visible_times.raw_time[key]) !== Math.floor(visible_times.raw_old_time[key])) {
this.notifyListeners(key, Math.floor(visible_times.time[key]), Math.floor(diff), "visible");
}
if(!nodraw) {
// Set the text value
this.data.text_elements[key].text(Math.floor(Math.abs(visible_times.time[key])));
var x = (j * this.data.attributes.item_size) + (this.data.attributes.item_size / 2);
var y = this.data.attributes.item_size / 2;
var color = this.config.time[key].color;
if (this.config.animation === "smooth") {
if (lastKey !== null && !limited_mode) {
if (Math.floor(visible_times.time[lastKey]) > Math.floor(visible_times.old_time[lastKey])) {
this.radialFade(x, y, color, 1, key);
this.data.state.fading[key] = true;
}
else if (Math.floor(visible_times.time[lastKey]) < Math.floor(visible_times.old_time[lastKey])) {
this.radialFade(x, y, color, 0, key);
this.data.state.fading[key] = true;
}
}
if (!this.data.state.fading[key]) {
this.drawArc(x, y, color, visible_times.pct[key]);
}
}
else {
this.animateArc(x, y, color, visible_times.pct[key], visible_times.old_pct[key], (new Date()).getTime() + tick_duration);
}
}
lastKey = key;
j++;
}
// Dont request another update if we should be paused
if(this.data.paused || nodraw) {
return;
}
// We need this for our next frame either way
var _this = this;
var update = function() {
_this.update.call(_this);
};
// Either call next update immediately, or in a second
if (this.config.animation === "smooth") {
// Smooth animation, Queue up the next frame
this.data.animation_frame = useWindow.requestAnimationFrame(update, _this.element, _this);
}
else {
// Tick animation, Don't queue until very slightly after the next second happens
var delay = (diff % 1) * 1000;
if (delay < 0)
delay = 1000 + delay;
delay += 50;
_this.data.animation_frame = useWindow.setTimeout(function() {
_this.data.animation_frame = useWindow.requestAnimationFrame(update, _this.element, _this);
}, delay);
}
};
TC_Instance.prototype.animateArc = function(x, y, color, target_pct, cur_pct, animation_end) {
if (this.data.attributes.context === null)
return;
var diff = cur_pct - target_pct;
if (Math.abs(diff) > 0.5) {
if (target_pct === 0) {
this.radialFade(x, y, color, 1);
}
else {
this.radialFade(x, y, color, 0);
}
}
else {
var progress = (tick_duration - (animation_end - (new Date()).getTime())) / tick_duration;
if (progress > 1)
progress = 1;
var pct = (cur_pct * (1 - progress)) + (target_pct * progress);
this.drawArc(x, y, color, pct);
//var show_pct =
if (progress >= 1)
return;
var _this = this;
useWindow.requestAnimationFrame(function() {
_this.animateArc(x, y, color, target_pct, cur_pct, animation_end);
}, this.element);
}
};
TC_Instance.prototype.drawArc = function(x, y, color, pct) {
if (this.data.attributes.context === null)
return;
var clear_radius = Math.max(this.data.attributes.outer_radius, this.data.attributes.item_size / 2);
if(!limited_mode) {
this.data.attributes.context.clearRect(
x - clear_radius,
y - clear_radius,
clear_radius * 2,
clear_radius * 2
);
}
if (this.config.use_background) {
this.data.attributes.context.beginPath();
this.data.attributes.context.arc(x, y, this.data.attributes.radius, 0, 2 * Math.PI, false);
this.data.attributes.context.lineWidth = this.data.attributes.line_width * this.config.bg_width;
// line color
this.data.attributes.context.strokeStyle = this.config.circle_bg_color;
this.data.attributes.context.stroke();
}
// Direction
var startAngle, endAngle, counterClockwise;
var defaultOffset = (-0.5 * Math.PI);
var fullCircle = 2 * Math.PI;
startAngle = defaultOffset + (this.config.start_angle / 360 * fullCircle);
var offset = (2 * pct * Math.PI);
if (this.config.direction === "Both") {
counterClockwise = false;
startAngle -= (offset / 2);
endAngle = startAngle + offset;
}
else {
if (this.config.direction === "Clockwise") {
counterClockwise = false;
endAngle = startAngle + offset;
}
else {
counterClockwise = true;
endAngle = startAngle - offset;
}
}
this.data.attributes.context.beginPath();
this.data.attributes.context.arc(x, y, this.data.attributes.radius, startAngle, endAngle, counterClockwise);
this.data.attributes.context.lineWidth = this.data.attributes.line_width;
// line color
this.data.attributes.context.strokeStyle = color;
this.data.attributes.context.stroke();
};
TC_Instance.prototype.radialFade = function(x, y, color, from, key) {
// TODO: Make fade_time option
var rgb = hexToRgb(color);
var _this = this; // We have a few inner scopes here that will need access to our instance
var step = 0.2 * ((from === 1) ? -1 : 1);
var i;
for (i = 0; from <= 1 && from >= 0; i++) {
// Create inner scope so our variables are not changed by the time the Timeout triggers
(function() {
var delay = 50 * i;
var rgba = "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + (Math.round(from * 10) / 10) + ")";
useWindow.setTimeout(function() {
_this.drawArc(x, y, rgba, 1);
}, delay);
}());
from += step;
}
if (typeof key !== undefined) {
useWindow.setTimeout(function() {
_this.data.state.fading[key] = false;
}, 50 * i);
}
};
TC_Instance.prototype.timeLeft = function() {
if (this.data.paused && typeof this.data.timer === "number") {
return this.data.timer;
}
var now = new Date();
return ((this.data.attributes.ref_date - now) / 1000);
};
TC_Instance.prototype.start = function() {
useWindow.cancelAnimationFrame(this.data.animation_frame);
useWindow.clearTimeout(this.data.animation_frame)
// Check if a date was passed in html attribute or jquery data
var attr_data_date = $(this.element).data('date');
if (typeof attr_data_date === "undefined") {
attr_data_date = $(this.element).attr('data-date');
}
if (typeof attr_data_date === "string") {
this.data.attributes.ref_date = parse_date(attr_data_date);
}
// Check if this is an unpause of a timer
else if (typeof this.data.timer === "number") {
if (this.data.paused) {
this.data.attributes.ref_date = (new Date()).getTime() + (this.data.timer * 1000);
}
}
else {
// Try to get data-timer
var attr_data_timer = $(this.element).data('timer');
if (typeof attr_data_timer === "undefined") {
attr_data_timer = $(this.element).attr('data-timer');
}
if (typeof attr_data_timer === "string") {
attr_data_timer = parseFloat(attr_data_timer);
}
if (typeof attr_data_timer === "number") {
this.data.timer = attr_data_timer;
this.data.attributes.ref_date = (new Date()).getTime() + (attr_data_timer * 1000);
}
else {
// data-timer and data-date were both not set
// use config date
this.data.attributes.ref_date = this.config.ref_date;
}
}
// Start running
this.data.paused = false;
this.update.call(this);
};
TC_Instance.prototype.restart = function() {
this.data.timer = false;
this.start();
};
TC_Instance.prototype.stop = function() {
if (typeof this.data.timer === "number") {
this.data.timer = this.timeLeft(this);
}
// Stop running
this.data.paused = true;
useWindow.cancelAnimationFrame(this.data.animation_frame);
};
TC_Instance.prototype.destroy = function() {
this.clearListeners();
this.stop();
useWindow.clearInterval(this.data.interval_fallback);
this.data.interval_fallback = null;
this.container.remove();
$(this.element).removeAttr('data-tc-id');
$(this.element).removeData('tc-id');
};
TC_Instance.prototype.setOptions = function(options) {
if (this.config === null) {
this.default_options.ref_date = new Date();
this.config = $.extend(true, {}, this.default_options);
}
$.extend(true, this.config, options);
// Use window.top if use_top_frame is true
if(this.config.use_top_frame) {
useWindow = window.top;
}
else {
useWindow = window;
}
updateUsedWindow();
this.data.total_duration = this.config.total_duration;
if (typeof this.data.total_duration === "string") {
if (typeof secondsIn[this.data.total_duration] !== "undefined") {
// If set to Years, Months, Days, Hours or Minutes, fetch the secondsIn value for that
this.data.total_duration = secondsIn[this.data.total_duration];
}
else if (this.data.total_duration === "Auto") {
// If set to auto, total_duration is the size of 1 unit, of the unit type bigger than the largest shown
for(var i = 0; i < Object.keys(this.config.time).length; i++) {
var unit = Object.keys(this.config.time)[i];
if (this.config.time[unit].show) {
this.data.total_duration = secondsIn[nextUnits[unit]];
break;
}
}
}
else {
// If it's a string, but neither of the above, user screwed up.
this.data.total_duration = secondsIn["Years"];
console.error("Valid values for TimeCircles config.total_duration are either numeric, or (string) Years, Months, Days, Hours, Minutes, Auto");
}
}
};
TC_Instance.prototype.addListener = function(f, context, type) {
if (typeof f !== "function")
return;
if (typeof type === "undefined")
type = "visible";
this.listeners[type].push({func: f, scope: context});
};
TC_Instance.prototype.notifyListeners = function(unit, value, total, type) {
for (var i = 0; i < this.listeners[type].length; i++) {
var listener = this.listeners[type][i];
listener.func.apply(listener.scope, [unit, value, total]);
}
};
TC_Instance.prototype.default_options = {
ref_date: new Date(),
start: true,
animation: "smooth",
count_past_zero: true,
circle_bg_color: "#60686F",
use_background: true,
fg_width: 0.1,
bg_width: 1.2,
text_size: 0.07,
number_size: 0.28,
total_duration: "Auto",
direction: "Clockwise",
use_top_frame: false,
start_angle: 0,
time: {
Days: {
show: true,
text: "Days",
color: "#FC6"
},
Hours: {
show: true,
text: "Hours",
color: "#9CF"
},
Minutes: {
show: true,
text: "Minutes",
color: "#BFB"
},
Seconds: {
show: true,
text: "Seconds",
color: "#F99"
}
}
};
// Time circle class
var TC_Class = function(elements, options) {
this.elements = elements;
this.options = options;
this.foreach();
};
TC_Class.prototype.getInstance = function(element) {
var instance;
var cur_id = $(element).data("tc-id");
if (typeof cur_id === "undefined") {
cur_id = guid();
$(element).attr("data-tc-id", cur_id);
}
if (typeof TC_Instance_List[cur_id] === "undefined") {
var options = this.options;
var element_options = $(element).data('options');
if (typeof element_options === "string") {
element_options = JSON.parse(element_options);
}
if (typeof element_options === "object") {
options = $.extend(true, {}, this.options, element_options);
}
instance = new TC_Instance(element, options);
TC_Instance_List[cur_id] = instance;
}
else {
instance = TC_Instance_List[cur_id];
if (typeof this.options !== "undefined") {
instance.setOptions(this.options);
}
}
return instance;
};
TC_Class.prototype.addTime = function(seconds_to_add) {
this.foreach(function(instance) {
instance.addTime(seconds_to_add);
});
};
TC_Class.prototype.foreach = function(callback) {
var _this = this;
this.elements.each(function() {
var instance = _this.getInstance(this);
if (typeof callback === "function") {
callback(instance);
}
});
return this;
};
TC_Class.prototype.start = function() {
this.foreach(function(instance) {
instance.start();
});
return this;
};
TC_Class.prototype.stop = function() {
this.foreach(function(instance) {
instance.stop();
});
return this;
};
TC_Class.prototype.restart = function() {
this.foreach(function(instance) {
instance.restart();
});
return this;
};
TC_Class.prototype.rebuild = function() {
this.foreach(function(instance) {
instance.initialize(false);
});
return this;
};
TC_Class.prototype.getTime = function() {
return this.getInstance(this.elements[0]).timeLeft();
};
TC_Class.prototype.addListener = function(f, type) {
if (typeof type === "undefined")
type = "visible";
var _this = this;
this.foreach(function(instance) {
instance.addListener(f, _this.elements, type);
});
return this;
};
TC_Class.prototype.destroy = function() {
this.foreach(function(instance) {
instance.destroy();
});
return this;
};
TC_Class.prototype.end = function() {
return this.elements;
};
$.fn.TimeCircles = function(options) {
return new TC_Class(this, options);
};
}(jQuery));
</script>
<script>
/**
* SyoTimer - jquery countdown plugin
* @version: 2.1.2
* @author: John Syomochkin <info@syomochkin.xyz>
* @homepage: http://syomochkin.xyz/folio/syotimer/demo.html
* @repository: git+https://github.com/mrfratello/SyoTimer.git
* @date: 2020.5.7
* @license: under MIT license
*/
// UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere.
(function (factory, jQuery) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = function( root, jQuery ) {
if ( jQuery === undefined ) {
if ( typeof window !== 'undefined' ) {
jQuery = require('jquery');
}
else {
jQuery = require('jquery')(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
factory(jQuery);
}
}(function ($) {
var DAY = "day",
HOUR = "hour",
MINUTE = "minute",
SECOND = "second";
var DAY_IN_SEC = 24 * 60 * 60;
var HOUR_IN_SEC = 60 * 60;
var MINUTE_IN_SEC = 60;
var LAYOUT_TYPES = {
d: DAY,
h: HOUR,
m: MINUTE,
s: SECOND
};
var UNIT_LINKED_LIST = {
list: [SECOND, MINUTE, HOUR, DAY],
next: function(current) {
var currentIndex = this.list.indexOf(current);
return (currentIndex < this.list.length ) ? this.list[currentIndex + 1] : false;
},
prev: function(current) {
var currentIndex = this.list.indexOf(current);
return (currentIndex > 0 ) ? this.list[currentIndex - 1] : false;
}
};
var DEFAULTS = {
year: 2034,
month: 7,
day: 31,
hour: 0,
minute: 0,
second: 0,
timeZone: 'local', // setting the time zone of deadline.
// If 'local' then the time zone is ignored and
// the deadline is determined by local time of the user.
// Otherwise, specifies the offset from the UTC
ignoreTransferTime: false, // If `true` then transfer to summer/winter time will not be considered.
layout: 'dhms', // sets an order of layout of units of the timer:
// days (d) of hours ('h'), minute ('m'), second ('s').
periodic: false, //`true` - the timer is periodic.
// If the date until which counts the timer is reached,
// the next value date which will count down
// the timer is incremented by the value `periodInterval`
periodInterval: 7, // the period of the timer in `periodUnit`
// (if `periodic` is set to `true`)
periodUnit: 'd', // the unit of measurement period timer
doubleNumbers: true, // `true` - show hours, minutes and seconds with leading zeros
// (2 hours 5 minutes 4 seconds = 02:05:04)
effectType: 'none', // The effect of changing the value of seconds
lang: 'eng', // localization of a countdown signatures (days, hours, minutes, seconds)
headTitle: '', // text above the countdown (may be as html string)
footTitle: '', // text under the countdown (may be as html string)
afterDeadline: function(timerBlock){
timerBlock.bodyBlock.html('<p style="font-size: 1.2em;">The countdown is finished!</p>');
}
};
var ITEMS_HAS_OPTIONS = {
second: false,
minute: false,
hour: false,
day: false
};
var SyoTimer = {
/**
* Init syotimer on DOM
* @param settings
* @returns {Array|Object|*}
*/
init: function(settings) {
var options = $.extend({}, DEFAULTS, settings || {});
options.itemTypes = staticMethod.getItemTypesByLayout(options.layout);
options._itemsHas = $.extend({}, ITEMS_HAS_OPTIONS);
for (var i = 0; i < options.itemTypes.length; i++) {
options._itemsHas[options.itemTypes[i]] = true;
}
return this.each(function() {
var elementBox = $(this);
elementBox.data('syotimer-options', options);
SyoTimer._render.apply(this, []);
SyoTimer._perSecondHandler.apply(this, []);
});
},
/**
* Rendering base elements of countdown
* @private
*/
_render: function() {
var elementBox = $(this),
options = elementBox.data('syotimer-options');
var timerItem = staticMethod.getTimerItem(),
headBlock = $('<div/>', {"class": 'syotimer__head'})
.html(options.headTitle),
bodyBlock = $('<div/>', {"class": 'syotimer__body'}),
footBlock = $('<div/>', {"class": 'syotimer__footer'})
.html(options.footTitle),
itemBlocks = {};
for (var i = 0; i < options.itemTypes.length; i++) {
var item = timerItem.clone();
item.addClass('syotimer-cell_type_' + options.itemTypes[i]);
bodyBlock.append(item);
itemBlocks[options.itemTypes[i]] = item;
}
var timerBlocks = {
headBlock: headBlock,
bodyBlock: bodyBlock,
footBlock: footBlock
};
elementBox.data('syotimer-blocks', timerBlocks)
.data('syotimer-items', itemBlocks)
.addClass('syotimer')
.append(headBlock)
.append(bodyBlock)
.append(footBlock);
},
/**
* Handler called per seconds while countdown is not over
* @private
*/
_perSecondHandler: function() {
var elementBox = $(this),
options = elementBox.data('syotimer-options');
$('.syotimer-cell > .syotimer-cell__value', elementBox).css( 'opacity', 1 );
var currentDate = new Date(),
deadLineDate = new Date(
options.year,
options.month - 1,
options.day,
options.hour,
options.minute,
options.second
),
differenceInMilliSec = staticMethod.getDifferenceWithTimezone(currentDate, deadLineDate, options),
secondsToDeadLine = staticMethod.getSecondsToDeadLine(differenceInMilliSec, options);
if ( secondsToDeadLine >= 0 ) {
SyoTimer._refreshUnitsDom.apply(this, [secondsToDeadLine]);
SyoTimer._applyEffectSwitch.apply(this, [options.effectType]);
} else {
elementBox = $.extend(elementBox, elementBox.data('syotimer-blocks'));
options.afterDeadline( elementBox );
}
},
/**
* Refresh unit DOM of countdown
* @param secondsToDeadLine
* @private
*/
_refreshUnitsDom: function(secondsToDeadLine) {
var elementBox = $(this),
options = elementBox.data('syotimer-options'),
itemBlocks = elementBox.data('syotimer-items'),
unitList = options.itemTypes,
unitsToDeadLine = staticMethod.getUnitsToDeadLine( secondsToDeadLine );
if ( !options._itemsHas.day ) {
unitsToDeadLine.hour += unitsToDeadLine.day * 24;
}
if ( !options._itemsHas.hour ) {
unitsToDeadLine.minute += unitsToDeadLine.hour * 60;
}
if ( !options._itemsHas.minute ) {
unitsToDeadLine.second += unitsToDeadLine.minute * 60;
}
for(var i = 0; i < unitList.length; i++) {
var unit = unitList[i],
unitValue = unitsToDeadLine[unit],
itemBlock = itemBlocks[unit];
itemBlock.data('syotimer-unit-value', unitValue);
$('.syotimer-cell__value', itemBlock).html(staticMethod.format2(
unitValue,
(unit !== DAY) ? options.doubleNumbers : false
));
$('.syotimer-cell__unit', itemBlock).html($.syotimerLang.getNumeral(
unitValue,
options.lang,
unit
));
}
},
/**
* Applying effect of changing numbers
* @param effectType
* @param unit
* @private
*/
_applyEffectSwitch: function(effectType, unit) {
unit = unit || SECOND;
var element = this,
elementBox = $(element);
if ( effectType === 'none' ) {
setTimeout(function () {
SyoTimer._perSecondHandler.apply(element, []);
}, 1000);
} else if ( effectType === 'opacity' ) {
var itemBlocks = elementBox.data('syotimer-items'),
unitItemBlock = itemBlocks[unit];
if (unitItemBlock) {
var nextUnit = UNIT_LINKED_LIST.next(unit),
unitValue = unitItemBlock.data('syotimer-unit-value');
$('.syotimer-cell__value', unitItemBlock).animate(
{opacity: 0.1},
1000,
'linear',
function () {
SyoTimer._perSecondHandler.apply(element, []);
}
);
if (nextUnit && unitValue === 0) {
SyoTimer._applyEffectSwitch.apply(element, [effectType, nextUnit]);
}
}
}
}
};
var staticMethod = {
/**
* Return once cell DOM of countdown: day, hour, minute, second
* @returns {object}
*/
getTimerItem: function() {
var timerCellValue = $('<div/>', {
"class": 'syotimer-cell__value',
"text": '0'
}),
timerCellUnit = $('<div/>', {"class": 'syotimer-cell__unit'}),
timerCell = $('<div/>', {"class": 'syotimer-cell'});
timerCell.append(timerCellValue)
.append(timerCellUnit);
return timerCell;
},
getItemTypesByLayout: function(layout) {
var itemTypes = [];
for (var i = 0; i < layout.length; i++) {
itemTypes.push(LAYOUT_TYPES[layout[i]]);
}
return itemTypes;
},
/**
* Getting count of seconds to deadline
* @param differenceInMilliSec
* @param options
* @returns {*}
*/
getSecondsToDeadLine: function(differenceInMilliSec, options) {
var secondsToDeadLine,
differenceInSeconds = differenceInMilliSec / 1000;
differenceInSeconds = Math.floor( differenceInSeconds );
if ( options.periodic ) {
var additionalInUnit,
differenceInUnit,
periodUnitInSeconds = staticMethod.getPeriodUnit(options.periodUnit),
fullTimeUnitsBetween = differenceInMilliSec / (periodUnitInSeconds * 1000);
fullTimeUnitsBetween = Math.ceil( fullTimeUnitsBetween );
fullTimeUnitsBetween = Math.abs( fullTimeUnitsBetween );
if ( differenceInSeconds >= 0 ) {
differenceInUnit = fullTimeUnitsBetween % options.periodInterval;
differenceInUnit = ( differenceInUnit === 0 )? options.periodInterval : differenceInUnit;
differenceInUnit -= 1;
} else {
differenceInUnit = options.periodInterval - fullTimeUnitsBetween % options.periodInterval;
}
additionalInUnit = differenceInSeconds % periodUnitInSeconds;
// fix когда дедлайн раньше текущей даты,
// возникает баг с неправильным расчетом интервала при different пропорциональной periodUnit
if ( ( additionalInUnit === 0 ) && ( differenceInSeconds < 0 ) ) {
differenceInUnit--;
}
secondsToDeadLine = Math.abs( differenceInUnit * periodUnitInSeconds + additionalInUnit );
} else {
secondsToDeadLine = differenceInSeconds;
}
return secondsToDeadLine;
},
/**
* Getting count of units to deadline
* @param secondsToDeadLine
* @returns {{}}
*/
getUnitsToDeadLine: function(secondsToDeadLine) {
var unit = DAY,
unitsToDeadLine = {};
do {
var unitInMilliSec = staticMethod.getPeriodUnit(unit);
unitsToDeadLine[unit] = Math.floor(secondsToDeadLine / unitInMilliSec);
secondsToDeadLine = secondsToDeadLine % unitInMilliSec;
} while (unit = UNIT_LINKED_LIST.prev(unit));
return unitsToDeadLine;
},
/**
* Determine a unit of period in milliseconds
* @param given_period_unit
* @returns {number}
*/
getPeriodUnit: function(given_period_unit) {
switch (given_period_unit) {
case 'd':
case DAY:
return DAY_IN_SEC;
case 'h':
case HOUR:
return HOUR_IN_SEC;
case 'm':
case MINUTE:
return MINUTE_IN_SEC;
case 's':
case SECOND:
return 1;
}
},
getDifferenceWithTimezone: function(currentDate, deadLineDate, options) {
var differenceByLocalTimezone = deadLineDate.getTime() - currentDate.getTime(),
amendmentOnTimezone = 0,
amendmentOnTransferTime = 0,
amendment;
if ( options.timeZone !== 'local' ) {
var timezoneOffset = parseFloat(options.timeZone) * staticMethod.getPeriodUnit(HOUR),
localTimezoneOffset = - currentDate.getTimezoneOffset() * staticMethod.getPeriodUnit(MINUTE);
amendmentOnTimezone = (timezoneOffset - localTimezoneOffset) * 1000;
}
if ( options.ignoreTransferTime ) {
var currentTimezoneOffset = -currentDate.getTimezoneOffset() * staticMethod.getPeriodUnit(MINUTE),
deadLineTimezoneOffset = -deadLineDate.getTimezoneOffset() * staticMethod.getPeriodUnit(MINUTE);
amendmentOnTransferTime = (currentTimezoneOffset - deadLineTimezoneOffset) * 1000;
}
amendment = amendmentOnTimezone + amendmentOnTransferTime;
return differenceByLocalTimezone - amendment;
},
/**
* Formation of numbers with leading zeros
* @param number
* @param isUse
* @returns {string}
*/
format2: function(number, isUse) {
isUse = (isUse !== false);
return ( ( number <= 9 ) && isUse ) ? ( "0" + number ) : ( "" + number );
}
};
var methods = {
setOption: function(name, value) {
var elementBox = $(this),
options = elementBox.data('syotimer-options');
if ( options.hasOwnProperty( name ) ) {
options[name] = value;
elementBox.data('syotimer-options', options);
}
}
};
$.fn.syotimer = function(options){
if ( typeof options === 'string' && ( options === "setOption" ) ) {
var otherArgs = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
methods[options].apply( this, otherArgs );
});
} else if (options === null || options === undefined || typeof options === 'object'){
return SyoTimer.init.apply(this, [options]);
} else {
$.error('SyoTimer. Error in call methods: methods is not exist');
}
};
$.syotimerLang = {
rus: {
second: ['секунда', 'секунды', 'секунд'],
minute: ['минута', 'минуты', 'минут'],
hour: ['час', 'часа', 'часов'],
day: ['день', 'дня', 'дней'],
handler: 'rusNumeral'
},
eng: {
second: ['second', 'seconds'],
minute: ['minute', 'minutes'],
hour: ['hour', 'hours'],
day: ['day', 'days']
},
por: {
second: ['segundo', 'segundos'],
minute: ['minuto', 'minutos'],
hour: ['hora', 'horas'],
day: ['dia', 'dias']
},
spa: {
second: ['segundo', 'segundos'],
minute: ['minuto', 'minutos'],
hour: ['hora', 'horas'],
day: ['día', 'días']
},
heb: {
second: ['שניה', 'שניות'],
minute: ['דקה', 'דקות'],
hour: ['שעה', 'שעות'],
day: ['יום', 'ימים']
},
/**
* Universal function for get correct inducement of nouns after a numeral (`number`)
* @param number
* @returns {number}
*/
universal: function(number) {
return ( number === 1 ) ? 0 : 1;
},
/**
* Get correct inducement of nouns after a numeral for Russian language (rus)
* @param number
* @returns {number}
*/
rusNumeral: function(number) {
var cases = [2, 0, 1, 1, 1, 2],
index;
if ( number % 100 > 4 && number % 100 < 20 ) {
index = 2;
} else {
index = cases[(number % 10 < 5) ? number % 10 : 5];
}
return index;
},
/**
* Getting the correct declension of words after numerals
* @param number
* @param lang
* @param unit
* @returns {string}
*/
getNumeral: function(number, lang, unit) {
var handlerName = $.syotimerLang[lang].handler || 'universal',
index = this[handlerName](number);
return $.syotimerLang[lang][unit][index];
}
};
}, window.jQuery));
</script>
<script>
(function () {
var callbacks = {
onInit: function () {
},
onStart: function () {
},
onStop: function () {
},
onEnd: function () {
},
onChangeStart: function () {
},
onChangeEnd: function () {
}
};
var base = {
stopped: true,
timezone: 0,
diff: null,
isEnd: false
};
var PsgTimer = function (selector, options) {
var timer = this;
if (selector.nodeType === Node.ELEMENT_NODE) {
timer.container = $(selector);
} else if (typeof selector === 'string') {
timer.selector = selector;
timer.container = $(timer.selector);
} else if (typeof selector === 'object') {
options = selector;
timer.selector = options.selector;
timer.container = $(timer.selector);
}
timer.options = $.extend({}, {
selector: '#psgTimer',
animation: false,
multipleBlocks: false,
endDateTime: undefined,
// currentDateTime: window.serverTime['U'] * 1000 || Date.now(),
currentDateTime: Date.now(),
labels: {
days: timer.container.attr('data-label-days') ? timer.container.attr('data-label-days') : false,
hours: timer.container.attr('data-label-hours') ? timer.container.attr('data-label-hours') : false,
minutes: timer.container.attr('data-label-minutes') ? timer.container.attr('data-label-minutes') : false,
seconds: timer.container.attr('data-label-seconds') ? timer.container.attr('data-label-seconds') : false
}
}, options);
timer.callbacks = timer.options.callbacks = $.extend({}, callbacks, timer.options.callbacks);
timer.base = $.extend({}, base);
if (typeof timer.options.endDateTime === 'string') {
timer.options.endDateTime = setTimerEndFromString(timer, timer.options.endDateTime);
}
timer.container.length ? timer.init() : console.log('No timer element on this page');
};
PsgTimer.prototype.init = function () {
var timer = this,
options = this.options;
var timerEnd = timer.container.attr('data-timer-end');
if (timerEnd !== undefined) {
options.endDateTime = setTimerEndFromString(timer, timerEnd);
}
// options.endDateTime = options.endDateTime + (timer.base.timezone * 1000 * 60 * 60);
timer.countdown = transformCountToArray(getCurrentCountDown(timer), options.multilpeBlocks);
timer.container.addClass('psgTimer').append(createMarkup(timer));
if (options.animation) {
timer.container.addClass('psgTimer_' + options.animation);
}
timer.query = setQueries(timer);
timer.callbacks.onInit();
if (!timer.base.isEnd) {
timer.start();
}
};
PsgTimer.prototype.start = function () {
var timer = this;
if (timer.base.stopped) {
timer.base.stopped = false;
timer.intervalId = setInterval(function () {
updateCounter(timer);
}, 1000);
timer.callbacks.onStart();
}
};
PsgTimer.prototype.restart = function () {
var timer = this;
timer.options.currentDateTime = Date.now();
timer.start();
};
PsgTimer.prototype.stop = function () {
var timer = this;
timer.base.stopped = true;
clearTimeout(timer.intervalId);
timer.callbacks.onStop();
};
var getCurrentCountDown = function (timer) {
var options = timer.options;
var base = timer.base;
options.currentDateTime = options.currentDateTime + 1001;
base.diff = options.endDateTime - options.currentDateTime;
var seconds = 0;
var minutes = 0;
var hours = 0;
var days = 0;
if (base.diff > 0) {
var total = parseFloat(((((base.diff / 1000.0) / 60.0) / 60.0) / 24.0));
days = parseInt(total);
total -= days;
total *= 24.0;
hours = parseInt(total);
total -= hours;
total *= 60.0;
minutes = parseInt(total);
total -= minutes;
total *= 60;
seconds = parseInt(total);
} else {
timer.callbacks.onEnd();
timer.stop();
timer.base.isEnd = true;
}
return {
days: {
amount: days,
max: Infinity,
className: 'days'
},
hours: {
amount: hours,
max: 24,
className: 'hours'
},
minutes: {
amount: minutes,
max: 60,
className: 'minutes'
},
seconds: {
amount: seconds,
max: 60,
className: 'seconds'
}
}
};
var transformCountToArray = function (count, multilpeBlocks) {
if (typeof count === 'object') {
for (var unit in count) {
if (count.hasOwnProperty(unit)) {
count[unit].amount = count[unit].amount.toString();
if (count[unit].amount.length < 2) {
count[unit].amount = '0' + count[unit].amount;
}
if (multilpeBlocks) {
count[unit].amount = count[unit].amount.split('');
} else {
count[unit].amount = [count[unit].amount];
}
}
}
}
return count;
};
var getTimeZone = function (string) {
var hours, minutes;
var number = string.replace(/\D/g, '');
var digit = string.replace(/[^+-]/g, '');
var multiplier = digit === '-' ? (-1) : 1;
if (number.length >= 3) {
hours = Number(number.substr(0, number.length - 2));
minutes = Number(number.substr(number.length - 2, 2));
} else {
hours = Number(number);
minutes = 0;
}
return (hours + minutes/60) * multiplier;
};
var setTimerEndFromString = function (timer, endTimeString) {
var timerDate = {};
var timerEnd = endTimeString.split(' ');
var endTime;
var timeExp = /^([0-1]\d|2[0-3])(:[0-5]\d){1,2}$/;
var dateExp = /(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d/;
var zoneExp = /(UTC|GMT)[+-](\d{1,2}([:,.]?\d{2})?)/;
for (var i = 0; i < timerEnd.length; i++) {
if (timerEnd[i].match(timeExp)) {
timerDate.time = timerEnd[i].split(':');
} else if (timerEnd[i].match(dateExp)) {
timerDate.date = timerEnd[i].split('.');
} else if (timerEnd[i].match(zoneExp)) {
timer.base.timezone = getTimeZone(timerEnd[i]);
} else {
console.log('Wrong end time.');
}
}
timerDate.year = parseInt(timerDate.date[2]) || 0;
timerDate.month = parseInt(timerDate.date[1]) - 1 || 0;
timerDate.day = parseInt(timerDate.date[0]) || 0;
timerDate.hours = parseInt(timerDate.time[0]) || 0;
timerDate.minutes = parseInt(timerDate.time[1]) || 0;
timerDate.seconds = parseInt(timerDate.time[2]) || 0;
timerDate.miliseconds = parseInt(timerDate.time[3]) || 0;
endTime = Date.UTC(timerDate.year, timerDate.month, timerDate.day, timerDate.hours, timerDate.minutes, timerDate.seconds, timerDate.miliseconds);
return endTime;
};
var createMarkup = function (timer) {
var countdown = timer.countdown;
var markup = {};
for (var unit in countdown) {
if (countdown.hasOwnProperty(unit)) {
var numberBlocks = '';
countdown[unit].amount.forEach(function (num) {
numberBlocks += numberContainer(timer, num);
});
markup.unit += '<div class="' + countdown[unit].className + ' psgTimer_unit">' + numberBlocks + '</div>';
}
}
markup.numbers = '<div class="psgTimer_numbers">' + markup.unit + '</div>';
markup.full = markup.numbers;
if (
timer.options.labels &&
timer.options.labels.days &&
timer.options.labels.hours &&
timer.options.labels.minutes &&
timer.options.labels.seconds
) {
var labels = timer.options.labels;
markup.labels = '<div class="psgTimer_labels">' +
'<div class="days">' + labels.days + '</div>' +
'<div class="hours">' + labels.hours + '</div>' +
'<div class="minutes">' + labels.minutes + '</div>' +
'<div class="seconds">' + labels.seconds + '</div>' +
'</div>';
markup.full = markup.numbers + markup.labels;
} else {
markup.full = markup.numbers;
}
return markup.full;
};
var numberContainer = function (timer, num) {
var markup = '',
data = 'data-number="' + num + '"';
var numberBlock = '<div class="number" ' + data + '>' + num + '</div>';
if (timer.options.animation === 'fade') {
markup = '<div>' + numberBlock + '</div>';
} else {
markup = numberBlock;
}
return markup;
};
var setQueries = function (timer) {
var countdown = timer.countdown,
query = {};
for (var unit in countdown) {
if (countdown.hasOwnProperty(unit)) {
query[unit] = timer.container.find(numberSelector(timer, countdown[unit].className));
}
}
return query;
};
var numberSelector = function (timer, className) {
var selector = '';
if (timer.options.animation === 'fade') {
selector = '.' + className + ' .number';
} else {
selector = '.' + className + ' .number';
}
return selector;
};
var updateCounter = function (timer) {
timer.callbacks.onChangeStart();
timer.countdown = transformCountToArray(getCurrentCountDown(timer), timer.options.multilpeBlocks);
for (var unit in timer.countdown) {
if (timer.countdown.hasOwnProperty(unit)) {
timer.countdown[unit].amount.forEach(function (number, index) {
if (timer.query[unit][index].getAttribute('data-number') !== number) {
aminate(timer.query[unit][index], number, timer.options.animation);
}
});
}
}
timer.callbacks.onChangeEnd();
};
var aminate = function (el, value, animationType) {
var $el = $(el);
$el.attr('data-number', value);
if (animationType === 'fade') {
animation.fade($el, value);
} else {
$el.html(value);
}
};
var animation = {
fade: function ($el, value) {
var animDuration = 350;
$el.css({
'transition': 'opacity ' + animDuration + 'ms',
'opacity': '0'
});
setTimeout(function () {
$el.html(value).css('opacity', 1);
}, animDuration + 10);
}
};
window.PsgTimer = PsgTimer;
})();
</script>
<script>
/// <reference path="../../Scripts/jquery-1.10.2-vsdoc.js" />
/**************************************************************************
*------------------------ COMINGSOON COUNTER 1.2 ------------------------
* ========================================================================
* Copyright 2014 Bruno Milgiaretti http://www.sisteminterattivi.org
* Licensed under MIT http://opensource.org/licenses/MIT
* ========================================================================
Usage:
Constructor:
$(selector).mbComingsoon(expiryDate Date or String) Expiry date of counter
$(selector).mbComingsoon(options plain Object) options: {
expiryDate: Date, //Expiry Date required
interval: Number, //Update interval in milliseconds (default = 1000))
localization: {
days: "days", //Localize labels of counter
hours: "hours",
minutes: "minutes",
seconds: "seconds"
}
callBack: Function //Function executed on expiry or if espired
}
Methds:
.mbComingSoon('start') // start counter
.mbComingSoon('stop') // stop counter
.mbComingSoon(options) // change options
Note: Max time that the counter can display is 999 days 23h 59' 59". If time is greater hours, minutes and seconds will be displayed
correctly, but days will be 999 until decrease under this quota.
*/
(function ($) {
// Class Definition
var MbComingsoon;
MbComingsoon = function (element, opt) {
this.$el = $(element);
this.end = opt.expiryDate;
this.interval = opt.interval;
this.speed = opt.speed;
this.timer = 0;
if (jQuery.isFunction(opt.callBack))
this.callBack = opt.callBack;
else
this.callBack = null;
this.localization = {days:"days", hours: "hours", minutes: "minutes", seconds: "seconds"};
$.extend(this.localization, this.localization, opt.localization);
}
MbComingsoon.prototype = {
// Returns an object containing counter data
getCounterNumbers: function () {
var result = {
days: {
tens: 0,
units: 0,
hundreds: 0
},
hours: {
tens: 0,
units: 0
},
minutes: {
tens: 0,
units: 0
},
seconds: {
tens: 0,
units: 0
}
}, millday = 1000 * 60 * 60 * 24,
millhour = 1000 * 60 * 60,
millminutes = 1000 * 60,
millseconds = 1000,
rest = 0
;
var now = new Date()
var diff = this.end.getTime() - now.getTime();
// CountDown expired !!
if (diff <= 0)
return result;
// Max number of days is 99 (i will expand in future versions)
var days = Math.min(Math.floor(diff / millday), 999);
rest = diff % millday;
result.days.hundreds = Math.floor(days / 100);
var dayrest = days % 100;
result.days.tens = Math.floor(dayrest / 10);
result.days.units = dayrest % 10;
var hours = Math.floor(rest / millhour);
rest = rest % millhour;
result.hours.tens = Math.floor(hours / 10);
result.hours.units = hours % 10;
var minutes = Math.floor(rest / millminutes);
rest = rest % millminutes;
result.minutes.tens = Math.floor(minutes / 10);
result.minutes.units = minutes % 10;
var seconds = Math.floor(rest / 1000);
result.seconds.tens = Math.floor(seconds / 10);
result.seconds.units = seconds % 10;
return result;
},
// If changed update a part (day, hours, minutes, seconds) of counter
updatePart: function (part) {
var cn = this.getCounterNumbers();
var $part = $('.' + part, this.$el);
if (part == 'days') {
this.setDayHundreds(cn.days.hundreds > 0);
if ($part.find('.number.hundreds.show').html() != cn[part].hundreds) {
var $n1 = $('.n1.hundreds', $part);
var $n2 = $('.n2.hundreds', $part);
this.scrollNumber($n1, $n2, cn[part].hundreds);
}
}
if ($part.find('.number.tens.show').html() != cn[part].tens) {
var $n1 = $('.n1.tens', $part);
var $n2 = $('.n2.tens', $part);
this.scrollNumber($n1, $n2, cn[part].tens);
}
if ($part.find('.number.units.show').html() != cn[part].units) {
var $n1 = $('.n1.units', $part);
var $n2 = $('.n2.units', $part);
this.scrollNumber($n1, $n2, cn[part].units);
}
// Only forn day part update hundreds
},
// True if countdown is expired
timeOut: function () {
var now = new Date()
var diff = this.end.getTime() - now.getTime();
if (diff <= 0)
return true;
return false;
},
setDayHundreds: function (action) {
if (action)
$('.counter.days', this.$el).addClass('with-hundreds');
else
$('.counter.days', this.$el).removeClass('with-hundreds');
},
// Update entire counter
updateCounter: function () {
this.updatePart('days');
this.updatePart('hours');
this.updatePart('minutes');
this.updatePart('seconds');
if (this.timeOut()) {
this.stop();
if (this.callBack)
this.callBack(this);
}
},
localize: function (localization) {
if($.isPlainObject(localization))
$.extend(this.localization, this.localization, localization);
$('.days', this.$el).siblings('.counter-caption').text(this.localization.days);
$('.hours', this.$el).siblings('.counter-caption').text(this.localization.hours);
$('.minutes', this.$el).siblings('.counter-caption').text(this.localization.minutes);
$('.seconds', this.$el).siblings('.counter-caption').text(this.localization.seconds);
},
// Start automatic update (interval in milliseconds)
start: function (interval) {
var me = this;
me.stop();
if (me.timer == 0)
me.timer = setInterval(function () { me.updateCounter() }, me.interval);
me.updateCounter();
},
// Stop automatic update
stop: function () {
//this.active = false;
if (this.timer > 0) {
clearInterval(this.timer);
this.timer = 0;
}
},
// Animation of a single
scrollNumber: function ($n1, $n2, value) {
if ($n1.hasClass('show')) {
$n2.removeClass('hidden-down')
.css('top', '-100%')
.text(value)
.stop()
.animate({ top: 0 }, this.speed, function () {
$n2.addClass('show');
});
$n1.stop().animate({ top: "100%" }, this.speed, function () {
$n1.removeClass('show')
.addClass('hidden-down');
});
} else {
$n1.removeClass('hidden-down')
.css('top', '-100%')
.text(value)
.stop()
.animate({ top: 0 }, this.speed, function () {
$n1.addClass('show');
});
$n2.stop().animate({ top: "100%" }, this.speed, function () {
$n2.removeClass('show')
.addClass('hidden-down');
});
}
}
}
// jQuery plugin
jQuery.fn.mbComingsoon = function (opt) {
var defaults = {
interval: 1000,
callBack: null,
localization: { days: "days", hours: "hours", minutes: "minutes", seconds: "seconds" },
speed:500
}
var options = {};
var content = ' <div class="counter-group" id="myCounter">' +
' <div class="counter-block">' +
' <div class="counter days">' +
' <div class="number show n1 hundreds">0</div>' +
' <div class="number show n1 tens">0</div>' +
' <div class="number show n1 units">0</div>' +
' <div class="number hidden-up n2 hundreds">0</div>' +
' <div class="number hidden-up n2 tens">0</div>' +
' <div class="number hidden-up n2 units">0</div>' +
' </div>' +
' <div class="counter-caption">days</div>' +
' </div>' +
' <div class="counter-block">' +
' <div class="counter hours">' +
' <div class="number show n1 tens">0</div>' +
' <div class="number show n1 units">0</div>' +
' <div class="number hidden-up n2 tens">0</div>' +
' <div class="number hidden-up n2 units">0</div>' +
' </div>' +
' <div class="counter-caption">hours</div>' +
' </div>' +
' <div class="counter-block">' +
' <div class="counter minutes">' +
' <div class="number show n1 tens">0</div>' +
' <div class="number show n1 units">0</div>' +
' <div class="number hidden-up n2 tens">0</div>' +
' <div class="number hidden-up n2 units">0</div>' +
' </div>' +
' <div class="counter-caption">minutes</div>' +
' </div>' +
' <div class="counter-block">' +
' <div class="counter seconds">' +
' <div class="number show n1 tens">0</div>' +
' <div class="number show n1 units">0</div>' +
' <div class="number hidden-up n2 tens">0</div>' +
' <div class="number hidden-up n2 units">0</div>' +
' </div>' +
' <div class="counter-caption">seconds</div>' +
' </div>' +
' </div>';
return this.each(function () {
var $this = $(this);
var data = $this.data('mbComingsoon');
if (typeof data === "undefined") {
if (opt instanceof Date)
options.expiryDate = opt;
else if ($.isPlainObject(opt))
$.extend(options, defaults, opt);
else if (typeof opt == "string")
options.expiryDate = new Date(opt);
if (!options.expiryDate)
throw new Error('Expiry date is required!');
data = new MbComingsoon($this, options);
$this.data('mbComingsoon', data);
$this.html(content);
data.localize();
data.start();
} else if (opt == 'start')
data.start();
else if (opt == 'stop')
data.stop();
else if ($.isPlainObject(opt)) {
if (opt.expiryDate instanceof Date)
data.end = opt.expiryDate;
if ($.isNumeric(opt.interval))
data.interval = opt.interval;
if ($.isFunction(opt.callBack))
data.callBack = opt.callBack;
if ($.isPlainObject(opt.localization))
data.localize(opt.localization);
data.start();
}
})
}
})(jQuery)
</script>
<style>
#count-down {
height: 350px;
}
/**
* This element is created inside your target element
* It is used so that your own element will not need to be altered
**/
.time_circles {
position: relative;
width: 100%;
height: 100%;
}
/**
* This is all the elements used to house all text used
* in time circles
**/
.time_circles > div {
position: absolute;
text-align: center;
}
/**
* Titles (Days, Hours, etc)
**/
.time_circles > div > h4 {
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
font-family: 'Century Gothic', Arial;
line-height: 1;
}
/**
* Time numbers, ie: 12
**/
.time_circles > div > span {
margin: 0;
padding: 0;
display: block;
width: 100%;
text-align: center;
font-family: 'Century Gothic', Arial;
line-height: 1;
font-weight: bold;
}
.syotimer{
text-align: center;
margin: 30px auto 0;
padding: 0 0 10px;
}
.syotimer-cell{
display: inline-block;
margin: 0 5px;
width: 79px;
background: url('data:image/png;base64,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') no-repeat 0 0;
}
.syotimer-cell__value{
font-size: 35px;
color: #80a3ca;
height: 81px;
line-height: 81px;
margin: 0 0 5px;
}
.syotimer-cell__unit{
font-family: Arial, serif;
font-size: 12px;
text-transform: uppercase;
}
#psgTimer {
margin-top: 50px;
}
.psgTimer{display:table;margin:0 auto 30px auto;font-size:0;font-family:'Roboto', sans-serif}.psgTimer_numbers>div,.psgTimer_labels>div{display:inline-block;font-size:0;width:124px;text-align:center}.psgTimer_numbers>div{position:relative}.psgTimer_numbers>div:after{content:":";line-height:60px;height:60px;display:block;font-weight:bold;font-size:24px;color:#21272C;position:absolute;top:0;right:-4px}.psgTimer_numbers>div:last-child:after{content:none}.psgTimer_numbers>div>div{display:inline-block;vertical-align:top;width:44px;height:60px;line-height:60px;background:#21272C;box-shadow:0px 4px 8px rgba(0,0,0,0.2);border-radius:6px;font-weight:bold;font-size:24px;text-align:center;color:#FFD631}.psgTimer_numbers>div>div:first-child{margin-right:5px}.psgTimer_labels>div{padding-top:5px !important;font-size:12px;line-height:18px;text-transform:uppercase;letter-spacing:1.2px;color:#21272C}@media screen and (max-width: 640px){.psgTimer_numbers>div,.psgTimer_labels>div{width:74px}.psgTimer_numbers>div{position:relative}.psgTimer_numbers>div:after{line-height:40px;height:40px;font-size:16px;right:-2px}.psgTimer_numbers>div div{width:26px;height:40px;line-height:40px;font-size:16px}.psgTimer_numbers>div div:first-child{margin-right:2px}.psgTimer_labels>div{font-size:10px;line-height:16px}}
#myCounter {
text-align: center;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700&text=0123456789);
.counter-group {
margin: 30px auto;
display: inline-block;
}
.counter-group:before,
.counter-group:after {
content: " ";
display: table;
}
.counter-group:after {
clear: both;
}
.counter-block {
float: left;
margin-right: 20px;
}
.counter-block .counter {
position: relative;
width: 200px;
height: 166px;
overflow: hidden;
font-weight: 700;
font-family: 'Open Sans Condensed', 'Arial Narrow', 'Nimbus Sans L', sans-serif;
}
.counter-block .counter .number {
padding: 1%;
width: 46%;
height: 98%;
background-color: #fff;
color: #444;
position: absolute;
font-size: 180px;
line-height: 150px;
top: -10000px;
}
.counter-block .counter .number.tens {
left: 0;
}
.counter-block .counter .number.units {
left: 50%;
}
.counter-block .counter .number.hundreds {
display: none;
}
.counter-block .counter .number.show {
top: 0;
z-index: 2;
}
.counter-block .counter .number.hidden-down {
top: 100%;
}
.counter-block .counter .number.hidden-up {
top: -100%;
z-index: 100;
}
.counter-block .counter.with-hundreds {
width: 300px;
}
.counter-block .counter.with-hundreds .number {
width: 30.66%;
}
.counter-block .counter.with-hundreds .number.tens {
left: 33.33%;
}
.counter-block .counter.with-hundreds .number.units {
left: 66.66%;
}
.counter-block .counter.with-hundreds .number.hundreds {
display: block;
left: 0;
}
.counter-block .counter-caption {
font-size: 150%;
}
@media (max-width: 992px) {
.counter-group {
margin: 10px auto;
}
.counter-block {
margin-right: 10px;
}
.counter-block .counter {
width: 120px;
height: 100px;
overflow: hidden;
font-weight: 700;
}
.counter-block .counter .number {
font-size: 108px;
line-height: 90px;
}
.counter-block .counter.with-hundreds {
width: 180px;
}
.counter-block .counter-caption {
font-size: 100%;
}
}
@media (max-width: 768px) {
.counter-group {
margin: 0 auto;
}
.counter-block {
margin-right: 8px;
}
.counter-block .counter {
width: 96px;
height: 80px;
}
.counter-block .counter .number {
font-size: 86px;
line-height: 72px;
}
.counter-block .counter.with-hundreds {
width: 144px;
}
.counter-block .counter-caption {
font-size: 85%;
}
}
@media (max-width: 480px) {
.counter-block .counter {
width: 61px;
height: 52px;
}
.counter-block .counter .number {
font-size: 55px;
line-height: 50px;
}
.counter-block .counter.with-hundreds {
width: 91px;
}
.counter-block .counter-caption {
font-size: 70%;
}
}
</style>
<?php
//print_r($_GET);
if(isset($_GET['y']) and
isset($_GET['m']) and
isset($_GET['d']) and
isset($_GET['h']) and
isset($_GET['mi']) and
isset($_GET['s'])){
$countdown=$_GET['y'].'-'.$_GET['m'].'-'.$_GET['d'].' '.$_GET['h'].':'.$_GET['mi'].':'.$_GET['s'];
}else{
$countdown = "2024-06-07 16:00:00";
}
?>
<style>
.fixed-bottom {
width: 100%;
background-color: lightseagreen;
color: white;
text-align: center;
padding: 25px;
font-size: 20px;
}
body {
margin: 0px;
}
</style>
<div class="fixed-bottom">
<input type="hidden" id="timer_value" value="<?php echo $countdown; ?>">
<main>
<form method="GET" action="/iframe.php">
<label>Jahr:<input type="number" name="y" min="1" max="3000"></label>
<label>Monat:<select name="m">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</label>
<label>Tag:
<select name="d">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</label>
<label>Stunde:
<select name="h">
<option value="00">0</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</label>
<label>Minute:
<label>Stunde:
<select name="mi">
<option value="00">00</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</label>
<label>Sekunden:
<select name="s">
<option value="00">00</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</label>
<input type="submit" value="start">
</form>
</div>
<h2>Counter Beispiel TimeCircles </h2>
<div data-date="<?php echo $countdown; ?>" id="count-down"></div>
<script>
$(function () {
$("#count-down").TimeCircles({
count_past_zero: false
});
})
</script>
<h2>Counter Beispiel SimpleTimer </h2>
<div id="simple_timer"></div>
<script>
$(function () {
var timer_value = document.getElementById("timer_value").value;
var date = new Date(timer_value);
$('#simple_timer').syotimer({
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate(),
hour: date.getHours(),
minute: date.getMinutes(),
seconds: date.getSeconds()
});
})
</script>
<h2>Counter Beispiel üsgTime </h2>
<div id="psgTimer" data-label-days="Days"
data-label-hours="Hours"
data-label-minutes="Minutes"
data-label-seconds="Seconds"></div>
<script>
$(function () {
var timer_value = document.getElementById("timer_value").value;
var date = new Date(timer_value);
new PsgTimer('#psgTimer', {
endDateTime: date
});
})
</script>
<h2>Counter Beispiel MyCounter </h2>
<div id="myCounter"></div>
<script>
$(function () {
var timer_value = document.getElementById("timer_value").value;
var date = new Date(timer_value);
$('#myCounter').mbComingsoon({
expiryDate: date,
interval: 1000,
speed: 500,
localization: {
days:"days",
hours:"hours",
minutes:"minutes",
seconds:"seconds"
},
callBack: function () {
console.log("ended");
}
});
});
</script>