Новый год уже не за горами, а все владельцы сайтов рыщут в сети в поисках подходящего для себя счетчика. Причиной тому является огромный спрос и актуальность, а потому, сегодня на примере хотелось бы разобрать небольшой скрипт счетчик до нового года на любой сайт.
demo
Готовые решения
Большинство именно это и ищет в интернете и на то есть свои причины. Готовые счетчики могут быть абсолютно любой сложности и с разными эффектами, что и привлекает к себе интерес, но иногда хочется внести и свою лепту и изобрести свой велосипед. Если вам дорого время и абсолютно не важно, где и как изобретался скрипт, то через поиск Гугл ищем «countdown jquery». Уверен, вы найдете много для себя подходящего, ну а если хотите изобретать велосипед, тогда продолжаем.
Что нам понадобится
Как обычно, в этой разработке будет задействована отличная связка HTML, CSS и Javascript. Каждая из этих частей будет отвечать за свои действия, поэтому сразу перейдем к ним.
HTML
Здесь могут быть 2 варианта, каркас можно построить сразу, либо же создавать его при помощи JS, но я предпочел первое. В любом из этих вариантов лучше создать блок DIV
в который будет производиться вставка, либо же прописываться сразу каркас. В принципе, здесь ему уделять большого внимания и не стоит, если в первую очередь у нас стоит акцент на функционале и работоспособности. Если же брать мой случай, то стоит в созданный блок добавить еще несколько тегов SPAN
или DIV
, в которые будут выводиться оставшиеся часы, минуты и т.д. Всем им лучше задать уникальные идентификаторы для простоты обращения через JS.
<div id="karkas"> <div id="days"></div> <div id="min"></div> ... </div>
CSS
Стилями мы задаем отображение тех самых блоков отображения оставшегося времени. Самый простой вариант — это сделать элементы блочно-обтекающими, задав свойству display: inline-block
. Дальше уже на свое усмотрение добавляем отступы внутри, снаружи, все по вашему желанию, чтобы радовало глаз.
#karkas div{ display: inline-block; padding: 5px; margin: 5px; ... }
Javascript
А здесь самое интересное и корень программы. Для начала нам нужно получить дату Нового Года 2016. А для этого есть прекрасная возможность создать объект new Date()
, внутри которого задать необходимые параметры, т.е. нашу дату.
var leftNY = new Date(2016,0,1);
Далее мы получаем сегодняшнюю дату без указания каких либо параметров в создании объекта.
var tooday = new Date();
Так как созданные объекты возвращают нам значение в миллисекундах, то мы узнаем их разницу. И именно это число позволит нам вести все дальнейшие расчеты. Так мы узнаем оставшиеся минуты, секунды, часы и прочее.
var leftTime = leftNY.getTime() - tooday.getTime();
К примеру, мы хотим узнать количество оставшихся дней. Для этого нам понадобится следующий расчет:
var leftDate = leftTime / 86400000;
Мы взяли разницу получившегося времени и поделили на количество миллисекунд в день. Вычислить их довольно просто. Мы знаем, что в 1с = 1000мс. Соответственно, нам необходимо 1000*60*60*24, где 60 это минуты и секунды, а 24 — часы в сутках. После вычисления не помешает округлить число к меньшему значению с помощью функции Math.floor()
.
Как только расчеты произведены, то можно смело их подставлять в имеющиеся блоки на странице, которые мы создавали на первом шаге. По идентификаторам обращаемся к элементам и заменяем их значения на вновь вычисленные. Все это стоит обернуть в функцию и вызывать, допустим, каждые пол секунды, или секунду.
function leftNY(){ var days = document.getElementById('days'); days.innerHTML = Math.floor(leftDate); } setInterval("leftNY()", 1000);
Итог: это был самый простой пример создания счетчика отсчета времени до Нового Года. Здесь можно потратить гораздо больше времени на оформление, если оно у вас есть. Как вариант, можно добавить больше эффектов на CSS, анимацию и трансформацию цифр и элементов. Только для этого понадобится на JS добавлять перед имеющимися элементами такие же, только со следующим числом отсчета. Таким образом, пока эффект будет производиться с одним элементом, на место него будет подставляться другой.

Подписка на обновления:
Спасибо за идею, думаю себе тоже, что-то вроде этого на курсы поставить в сайдбаре