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

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

Как создать таймер обратного отсчета на сайт? Узнай сейчас и скачай бесплатно 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);

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

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

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

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

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Политика конфиденциальности