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

Приветствую вас дорогие читатели! В этом уроке я покажу, как сделать простенький таймер обратного отсчета!

Итак, с таймерами в интернете можно встретиться довольно таки часто. Например, когда предлагают записаться на какой-нибудь семинар или бизнес тренинг, на сайте устанавливают время обратного отчета, по истечению которого уже нельзя будет принять участие в каком-то мероприятии.

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

В этом уроке я не стал использовать никаких дополнительных библиотек и Фреймворков типа “jquery” и решил написать весь код на чистом javascript, в одном html файле.

Что умеет данный таймер?

Давайте опишем условия работы нашей программки:

1. Можно установить количество дней, минут и секунд
2. Каждую секунду происходит уменьшение времени соответственно на 1 секунду
3. По истечению времени появится всплывающее окно с текстом о том, что таймер сработал

 

Как реализовать таймер?

Весь код можно рассмотреть или скачать ниже, а чтобы лучше разобраться в уроке, разбирать  код мы будем по отдельности!

HTML код:

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

Здесь все просто – имеется обертка для цифр с идентификатором – “timer”, а в нее вложены еще 3 блока для цифр с соответствующими ID.

  - это пробел, который чуть-чуть пододвигает двоеточие.

Если вам нужно задать начальное значение для отсчета, то изменять его нужно как раз в этом html коде.

CSS код:

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

#timer div{
display: inline;
}

Здесь мы задаем стили отдельно для обертки, прописывая стиль шрифта, его размер, цвет и так далее, а также прописываем свойство – “display: inline” для внутренних div’ов, чтобы цифры выстроились в одну полоску.

 

Ну и самое интересное – 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 = 59;
                
                if( minute > 0 ) minute--;
                else{
                        second = 59;
                        
                        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);

Как видите, мы создали функцию – “timer”, которая будет срабатывать каждую секунду. Срабатывание этой функции достигается за счет установленного интервала (setInterval):

window.intervalID = setInterval(timer, 1000)

Интервал (функция) принимает два параметра: название функции, которую нужно вызывать и время в миллисекундах.

1000 миллисекунд – это одна секунда.

Этому интервалу мы присваиваем идентификатор – “intervalID “, для того, чтобы можно было остановить интервал, когда выйдет время.

Window означает, что переменная будет глобальной и доступна внутри функции.

Теперь давайте разберем непосредственно саму функцию “timer”.

Сначала мы считываем текущие часы, минуты и секунды в переменные с соответствующими названиями.

Переменная – “end” нужна для того, чтобы остановить уменьшение таймера и вывести фразу – “Таймер сработал!”. По умолчанию выставляем в false (ложь).

Далее идут простые условия:

Если секунд больше 0, то уменьшаем их на 1, иначе присваиваем им максимальное значение (60) и проверяем точно также минуты, а потом и часы

В итоге, если окажется, что количество оставшихся часов, и минут и секунд равно 0, то изменяем переменную end на true.

Далее, мы просто проверяем переменную end – если она равна истине, значит, таймер сработал и нужно вывести фразу и удались интервал, иначе просто обновляем значения часов, минут и секунд.

Весь код:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<title>Создаем таймер обратного отсчета - Seo блог sergey-oganesyan.ru</title>


</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>

Как видите, создать таймер обратного отсчета очень просто!

Прилагаю пример и исходный файл данного урока по javascript, на этом у меня все, подписывайтесь на обновления, желаю вам удачи, пока!

Посмотреть результат

Скачать

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.