Как создать таймер обратного отсчета на сайт? Узнай сейчас и скачай бесплатно 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> :
<div id=”minute”>56</div> :
<div id=”second”>45</div>
</div>
</body>
</html>
А теперь, кому интересно, разберем составляющие данного кода таймера.
Вот этот кусок кода простой html, где содержится обертка для цифр с их идентификатором “timer” и блоки с их “id”:
<div id=”timer”>
<div id=”hour”>11</div> :
<div id=”minute”>56</div> :
<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);
Теперь Вы можете таймер обратного отсчета скачать вот здесь:
Этот файл содержит уже готовый к использованию таймер обратного отсчета на сайт!
На этом заканчиваю свой рассказ! Всем удачи и до новых встреч!
