slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна4 / 5
 
Автор: Администратор
Просмотров: 26804
Теги: javascript, simple, timer, setInterval, clearInterval

В этой статье мы расскажем о том, как написать простейший код таймера обратного отсчёта.

Для начала опишем логику работы нашего таймера.

  1. Вначале определим функцию инициализации таймера, которая будет делать следующее:
    1. Определяет дату окончания таймера
    2. Рассчитывает количество часов, минут и секунд до этой даты
    3. Запускает функцию обратного отсчёт
  2. Определим функцию, которая будет выводить определенным образом время на страницу
  3. Определим функцию, с сообщением, которая будет вызываться при истечении времени

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

Создадим документ с js-кодом - timer.js и добавим в него следующий код:

window.onload = function() // дожидаемся загрузки страницы
{
     initializeTimer(); // вызываем функцию инициализации таймера
}


function initializeTimer() {
	var endDate = new Date(2020,9,31,8,31); // получаем дату истечения таймера
	var currentDate = new Date(); // получаем текущую дату
	var seconds = (endDate-currentDate) / 1000; // определяем количество секунд до истечения таймера
	if (seconds > 0) { // проверка - истекла ли дата обратного отсчета
		var minutes = seconds/60; // определяем количество минут до истечения таймера
		var hours = minutes/60; // определяем количество часов до истечения таймера
		minutes = (hours - Math.floor(hours)) * 60; // подсчитываем кол-во оставшихся минут в текущем часе
		hours = Math.floor(hours); // целое количество часов до истечения таймера
		seconds = Math.floor((minutes - Math.floor(minutes)) * 60); // подсчитываем кол-во оставшихся секунд в текущей минуте
		minutes = Math.floor(minutes); // округляем до целого кол-во оставшихся минут в текущем часе
		
		setTimePage(hours,minutes,seconds); // выставляем начальные значения таймера
		
		function secOut() {
		  if (seconds == 0) { // если секунду закончились то
			  if (minutes == 0) { // если минуты закончились то
				  if (hours == 0) { // если часы закончились то
					  showMessage(timerId); // выводим сообщение об окончании отсчета
				  }
				  else {
					  hours--; // уменьшаем кол-во часов
					  minutes = 59; // обновляем минуты 
					  seconds = 59; // обновляем секунды
				  }
			  }
			  else {
				  minutes--; // уменьшаем кол-во минут
				  seconds = 59; // обновляем секунды
			  }
		  }
		  else {
			  seconds--; // уменьшаем кол-во секунд
		  }
		  setTimePage(hours,minutes,seconds); // обновляем значения таймера на странице
		}
		timerId = setInterval(secOut, 1000) // устанавливаем вызов функции через каждую секунду
	}
	else {
		alert("Установленная дата уже прошла");
	}
}

function setTimePage(h,m,s) { // функция выставления таймера на странице
	var element = document.getElementById("timer"); // находим элемент с id = timer
	element.innerHTML = "Часы:"+h+"<br>Минуты:"+m+"<br>Секунды:"+s; // выставляем новые значения таймеру на странице
}

function showMessage(timerId) { // функция, вызываемая по истечению времени
	alert("Время истекло!");
	clearInterval(timerId); // останавливаем вызов функции через каждую секунду
}

Стоит отметить некоторые моменты, по мимо комментариев.

Например new Date() задаем дату, без параметров - задается текущая дата. А параметры задают конкретную дату, в формате "год, месяц, день, час, минута, секунда", не обязательно указывать параметры справа налево, тогда они будут приняты за 0. Т.е. можно указать только год или год, месяц и день. Месяц задается начиная от 0 (0 - январь), а например 11 - декабрь.

Math.floor() округляет до целого числа.

setInterval() задает повторяющуюся функцию, в нашем случае функцию обратного отсчета. clearInterval() останавливает отсчет таймера.

Наш пример не рассматривает отсчет с днями, но разобравшись в коде вы и сами сможете без проблем добавить дни. Или можно изменить способ отображения.

Доментрацию вы можете посмотреть на демо-странице:

demo

Скачать доментрацию:

download

Комментарии   

+1 # Валерий 26.06.2017 13:02
Здравствуйте!
Засада!!!
Не могу разобраться с кодом таймера.
1. Нужно только 60 секунд с циклом. setInterval()
2. Настройки для вывода разного текста на определенном этапе работы таймера.
Пример: 60-59-58--...--31 сек.(висит одна надпись).30------10(другая надпись) и т.д.
Ведь время зависание надписи каждую "мs" или "s" тоже имеет значение?
С css проблем нет,а тут завис...
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    7.80
  • intuit89
    6.20
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Как подключить на свой сайт jQuery

Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.

Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее
Ajax-форма обратной связи на JQuery

В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее
Увеличение изображения при нажатии на него.

В этой статье мы расскажем о том, как сделать модальное окно с увеличенным изображением.

Теги:

javascript, img, jQuery

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
А Вы знали, что на нашем сайте есть блог, где собраны статьи с интересной и, главное, полезной инфор...
Перейти в тему
ZOMRO аватар
Друзья, на нашем сайте доступен сервис, который предназначен для того, чтобы Вы могли проверить “вид...
Перейти в тему
ZOMRO аватар
Бесплатный тестовый период виртуального хостинга на 10 дней Мы гарантируем высокую стабильность и п...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.