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

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

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

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

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

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

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

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



Про Валерий Бородин

Проверьте также

всплывающая подсказка при наведении

Всплывающая подсказка при наведении — Плагин или скрипт?

Как делается всплывающая подсказка при наведении на сайте? Узнай сейчас! Здравствуйте, уважаемые друзья и гости …

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу