Таймер обратного отсчета на сайт бесплатно скачать для всех!

таймер обратного отсчета на сайт

Как создать таймер обратного отсчета на сайт? Узнай сейчас и скачай бесплатно javascript!

Здравствуйте, уважаемые друзья и гости блога! Сегодня Вы узнаете о том, как создать и установить таймер обратного отсчета на сайт. Это простенький таймер для сайта или как еще говорят счетчик обратного отсчета, который поможет Вам в создании своих лендинг пейдж, о создании которых я уже писал в своей прошлой статье. Можете посмотреть и узнать, как создают landing page и что для этого нужно знать.

Ну а сейчас мы с вами разберем еще один полезный вопрос – как создать самому и установить таймер обратного отсчета на сайт …

Делается это довольно просто и быстро, о чем Вы сейчас и узнаете и убедитесь в этом сами! Также Вы сможете скачать бесплатно исходники и создать свой собственный счетчик обратного отсчета для своего сайта.

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

Создаем таймер обратного отсчета на сайт!

таймер для сайта
таймер для сайта

Вот посмотрите сначала, что у Вас получится если Вы будете следовать моим советам и создадите подобный таймер для сайта. Нажмите на кнопку “Демо” и увидите таймер обратного отсчета времени, который в итоге должен у Вас получиться:

демо
демо

Если Вам он понравился и Вы хотите создать такой же счетчик обратного отсчета на своем сайте, то давайте это сделаем прямо сейчас!

Мы с вами не будем использовать для создания подобного таймера обратного отсчета времени ни каких лишних инструментов, как дополнительные библиотеки jquery, а сделаем все на обычном javascript и в одном html файле. За то все быстро, легко для Вас и для сайта!

Этот таймер обратного отсчета времени будет обладать такими функциями как:

  • Вы сможете установить отсчет количества часов, минут и секунд
  • На каждой секунде отсчета, соответственно уменьшается время на одну секунду
  • Когда истекает установленное время отсчета, то появляется всплывающее окно с оповещающим текстом, что таймер сработал

Теперь давайте создадим данный таймер обратного отсчета времени на сайте. Вот сам код таймера:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=’Content-Type’ content=’text/html; charset=utf8′>
<title>Создаем таймер обратного отсчета – Seo блог sergey-oganesyan.ru</title>
<script>
window.onload = function(){

function timer(){

var hour = document.getElementById(‘hour’).innerHTML;
var minute = document.getElementById(‘minute’).innerHTML;
var second = document.getElementById(‘second’).innerHTML;
var end = false;

if( second > 0 ) second–;
else{
second = 60;

if( minute > 0 ) minute–;
else{
second = 60;

if( hour > 0 ) hour–;
else end = true;
}
}

if(end){
clearInterval(intervalID);
alert(“Таймер сработал!”);
}else{
document.getElementById(‘hour’).innerHTML = hour;
document.getElementById(‘minute’).innerHTML = minute;
document.getElementById(‘second’).innerHTML = second;
}
}
window.intervalID = setInterval(timer, 1000);
}
</script>
<style>
#timer{
margin: 20px auto;
text-align: center;
color: #333;
font-family: fantasy;
font-size: 100px;
cursor: default;
}

#timer div{
display: inline;
}
</style>
</head>
<body>

<div id=”timer”>
<div id=”hour”>11</div>&nbsp;:
<div id=”minute”>56</div>&nbsp;:
<div id=”second”>45</div>
</div>

</body>
</html>

А теперь, кому интересно, разберем составляющие данного кода таймера.

Вот этот кусок кода простой html, где содержится обертка для цифр с их идентификатором “timer” и блоки с их “id”:

<div id=”timer”>
<div id=”hour”>11</div>&nbsp;:
<div id=”minute”>56</div>&nbsp;:
<div id=”second”>45</div>
</div>

В html коде Вы сможете изменить отсчет времени на свой.

Далее идет обыкновенный CSS код:

#timer{
margin: 20px auto;
text-align: center;
color: #333;
font-family: fantasy;
font-size: 100px;
cursor: default;
}

#timer div{
display: inline;
}

В нем Вы сможете изменить стили на свои, если это будет Вам нужно. То есть поменять цвет, размер и т.д.

А теперь самое главное в этом скрипте – сам javascript, который отвечает за все функции нашего таймера. Вот так он выглядит:

function timer(){

var hour = document.getElementById(‘hour’).innerHTML;
var minute = document.getElementById(‘minute’).innerHTML;
var second = document.getElementById(‘second’).innerHTML;
var end = false;

if( second > 0 ) second–;
else{
second = 60;

if( minute > 0 ) minute–;
else{
second = 60;

if( hour > 0 ) hour–;
else end = true;
}
}

if(end){
clearInterval(intervalID);
alert(“Таймер сработал!”);
}else{
document.getElementById(‘hour’).innerHTML = hour;
document.getElementById(‘minute’).innerHTML = minute;
document.getElementById(‘second’).innerHTML = second;
}
}
window.intervalID = setInterval(timer, 1000);

Теперь Вы можете таймер обратного отсчета скачать вот здесь:

скачать исходник
скачать исходник

Этот файл содержит уже готовый к использованию таймер обратного отсчета на сайт!

На этом заканчиваю свой рассказ! Всем удачи и до новых встреч!

Вы будете первым, кто поставит оценку!
Понравилась статья? Поделиться с друзьями:
Добавить комментарий