Здравствуйте, благодаря этой теме
Как сделать разный счетчик для каждого блока? и этой
Как сделать вывод цикла в оба блока?, за что огромное спасибо всем ответившим, я пришел к конечному решению счетчиков.
Напомню условия работы скрипта:
- минимум кода html и css - всё через JS, максимум блок для счетчика в html-коде
- сделать гибкий скрипт, чтобы подключал счетчики для разных праздников - например НГ и Кузбасс или НГ и День Победы
- счетчиков на одной странице может быть несколько - может быть как один так и 5 или 7
- поддержка ие8 и современных браузеров
Прошу оцените качество кодинга и направьте на путь истинный - что можно улучшить или доработать?
Я всегда за идеальный вариант кода - главное знать как его идеализировать, в чем конечно моих познаний в JS не хватает.
Вот собственно готовый JS:
;
// возьмем все блоки для счетчиков
var script = document.querySelectorAll(".counter");
for(var c=0;c<script.length;c++){
// берем значения data-атрибутов у каждого блока
var bg = script[c].dataset.background;
var event = script[c].dataset.event;
var date = script[c].dataset.day;
// вызываем функцию создания обертки счетчика
script[c].appendChild(bg_count(bg, event, date));
}
function bg_count(theme, name, timestop){
// создадим элемент для обертки счетчика
var wrapper = document.createElement("div");
wrapper.className = "counter_block";
// создадим элемент для самого счетчика
var counter = document.createElement("div");
counter.className = "counter_block-counter";
// вставляем счетчик в нашу обертку
wrapper.appendChild(counter);
// берем все созданные нами счетчики
var block = wrapper.querySelectorAll(".counter_block-counter");
// берем дату праздника счетчика в переменную date
date = new Date(timestop);
// создаем объект с шаблонами счетчиков
var celebrations = {
"kuzbass":{
css: 'width:300px;height:150px;margin-top:15px;position:relative;background:url(./img/'+name+'/'+theme+'.jpg);background-position:bottom;background-size:cover;background-repeat:no-repeat;',
blockCss: 'position:absolute;bottom:25.7%;font-size:25px;text-align:center;color:white;left:0;right:1px;background-color:rgba(156,156,156,0.2);letter-spacing:1px;'
},
"new_year":{
css:'width:160px;height:206px;margin-top:15px;position:relative;background:url(./img/'+name+'/'+theme+'.jpg);background-position:bottom;background-size:cover;background-repeat:no-repeat;',
blockCss: 'position:absolute;bottom:25.7%;font-size:25px;text-align:center;color:white;left:0;right:1px;background-color:rgba(156,156,156,0.2);letter-spacing:1px;'
}
};
// создадим функцию появления мыши на блоке счетчика
function mouseOver(){
wrapper.style.backgroundPosition = "top";
block[0].style.display = "none";
}
// создадим функцию ухода мыши с блока счетчика
function mouseOut(){
wrapper.style.backgroundPosition = "bottom";
block[0].style.display = "block";
}
// анимируем поведение мыши на блоке
wrapper.onmouseover = function(e){mouseOver()};
wrapper.onmouseout = function(e){mouseOut()};
// стилизуем счетчик - блок и сам счетчик
wrapper.style.cssText = celebrations[name].css;
block[0].style.cssText = celebrations[name].blockCss;
// вызываем функцию обратного отсчета
var timer = setInterval(showCounter.bind(this, wrapper, block[0], date), 1000);
// прерываем функцию и берем значение wrapper
return wrapper;
}
// создаем функцию обратного отсчета
function showCounter(main, c_block, timecount){
// берем текущую дату
var now = new Date();
// берем дату с дата-атрибута
var cel_date = new Date(timecount);
// вычисляем промежуток до праздника
var distance = cel_date - now;
// вычисляем дни, часы, минуты и секунды до праздника
var counter_data = {
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)
}
// условия для чисел меньше 10 - добавление нулей
if(counter_data.days < 10){counter_data.days = "0"+counter_data.days}
if(counter_data.hours < 10){counter_data.hours = "0"+counter_data.hours}
if(counter_data.mins < 10){counter_data.mins = "0"+counter_data.mins}
if(counter_data.secs < 10){counter_data.secs = "0"+counter_data.secs}
// если промежуток отрицательный - убираем счетчик совсем
if(distance < 0){
main.style.display = "none";
clearInterval(timer);
}
// изменяем циферки счетчика
c_block.innerHTML = '\
<span id="days">'+counter_data.days+'</span>\
<span id="hours">'+counter_data.hours+'</span>\
<span id="mins">'+counter_data.mins+'</span>\
<span id="secs">'+counter_data.secs+'</span>\
';
}
Любая критика приветствуется и даже нужна - без критики я не смогу понять свои ошибки, может какие-то недоработки и прочие баги.
