Благодаря одному пользователю данного сайта, который удалил свой ответ, видимо (не знаю зачем, а потом еще говорят, гугли, когда люди чистят за собой), я привел свой код к такому решению и это еще не окончательное, в планах создать еще два метода - для counter_time и для layout.innerHTML. Пока не соображу как, вот решение, которое меня устроило, но не до конца, о чем я упомянул выше:
;
var counterList = document.querySelectorAll(".counter");
function myCounter(counterEl){
this.counter = counterEl;
this.init = function(){
var counter_event;
var counter_theme;
var counter_date;
var counter_link;
if(this.counter.hasAttribute("data-event")){
counter_event = this.counter.getAttribute("data-event").replace(/\s/g, '');
}
if(this.counter.hasAttribute("data-theme")){
counter_theme = this.counter.getAttribute("data-theme").replace(/\s/g, '');
}
else if(this.counter.hasAttribute("data-background")){
counter_theme = this.counter.getAttribute("data-background").replace(/\s/g, '');
}
if(this.counter.hasAttribute("data-date")){
counter_date = this.counter.getAttribute("data-date").replace(/\s/g, '');
}
else if(this.counter.hasAttribute("data-day")){
counter_date = this.counter.getAttribute("data-day").replace(/\s/g, '');
}
if(this.counter.hasAttribute("data-link")){
counter_link = this.counter.getAttribute("data-link").replace(/\s/g, '');
}
var counterChild = this.makeCounter(counter_event, counter_theme, counter_date, counter_link);
this.counter.appendChild(counterChild);
};
this.makeCounter = function(theme, event, day, link){
var block = document.createElement("div");
var styles = document.createElement("link");
if(styles){
styles.href="j/css/counter"+ "/" + theme + "/" + event + ".css";
styles.rel = "stylesheet";
document.querySelectorAll("head")[0].appendChild(styles);
}
if(block){
block.className = theme + "-" + event + " template";
var timerIf = new Date(day.replace(/(\d+).(\d+).(\d+)/, '$3/$2/$1')) - new Date();
if(timerIf <= 0){
block.className += " zero";
}
else{
var wrap = document.createElement("div");
if(wrap){
wrap.className = "counter-wrap";
block.appendChild(wrap);
}
}
if(link){
var linker = document.createElement("a");
if(linker){
linker.className = "counter-link";
linker.href=link;
linker.target="_blank";
block.appendChild(linker);
}
}
var resetCount = {
obj: null
};
var timer = setInterval(this.makeCount.bind(this, wrap, day, resetCount), 1000);
resetCount.obj = timer;
}
return block;
};
this.makeCount = function(layout, timecount, reset){
var now = new Date();
var eventDate = new Date(timecount.replace(/(\d+).(\d+).(\d+)/, '$3/$2/$1'));
var distance = eventDate - now;
var counterTime = {
days: Math.floor(distance / (1000 * 60 * 60 * 24)),
hours: Math.floor(distance % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)),
mins: Math.floor(distance % (1000 * 60 * 60) / (1000 * 60)),
secs: Math.floor(distance % (1000 * 60) / 1000)
};
for(var i in counterTime){
if(counterTime[i] < 10){
counterTime[i] = "0" + counterTime[i];
}
}
if(distance <= 0){
if(reset.obj !== null){
clearInterval(reset.obj);
}
}
else{
layout.innerHTML = '<div id="days" class="inline">'+counterTime.days+'<span>:</span></div>';
layout.innerHTML += '<div id="hours" class="inline">'+counterTime.hours+'<span>:</span></div>';
layout.innerHTML += '<div id="mins" class="inline">'+counterTime.mins+'<span>:</span></div>';
layout.innerHTML += '<div id="secs" class="inline">'+counterTime.secs+'</div>';
}
};
}
for(var c = 0; c<counterList.length; c++){
var counter = new myCounter(counterList[c]);
counter.init();
}
Если есть у кого что сказать по коду, как можно было бы оформить еще лучше, я не против послушать и пообщаться на данную тематику. Сразу оговорюсь заранее (я до этого не сказал), код пишется исключительно под ие8+ и никак иначе. Все новомодные штучки, к сожалению, приходится избегать, включая const, let, class.
