Счетчик до нового года

Новый год уже не за горами, а все владельцы сайтов рыщут в сети в поисках подходящего для себя счетчика. Причиной тому является огромный спрос и актуальность, а потому, сегодня на примере хотелось бы разобрать небольшой скрипт счетчик до нового года на любой сайт.

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 добавлять перед имеющимися элементами такие же, только со следующим числом отсчета. Таким образом, пока эффект будет производиться с одним элементом, на место него будет подставляться другой.

не скупись оцени статью