Таймер обратного отсчета для сайта

Таймер обратного отсчета для сайта

От автора: разнообразные акции, распродажи, скидки и т.д. – распространенный маркетинговый ход современных торговых отношений, который часто используется в интернет магазинах. Наверное, каждый из Вас сталкивался с таким понятием как таймер обратного отсчета, определяющий сначала фиксированную дату начала, а затем время до окончания какой-либо акции или распродажи. Подобный скрипт исключает необходимость лишних подсчетов и делает сайт более эффектным и современным. В этом уроке я предлагаю Вам создать это полезное веб-приложение вместе.

План урока

    1. Создание HTML разметки.

    2. Подготовка к кодированию на Javascript.

    3. Создаем логику таймера.

    4. Выводим таймер на экран.

Детали учебника

Тема: JavaScript

Сложность: Средняя

Урок: Видео (.mp4)

Время: 01:31:24

Размер архива: 94 Mb

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

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

Логику скрипта мы напишем на языке Javascript, с использованием библиотеки jQuery. А визуальное оформление создадим с помощью обычного HTML. Для тех, кто не знает, библиотека jQuery – это библиотека, написанная на языке Javascript. Если сказать другими словами, то это набор готовых функций, для облегчения взаимодействия Javascript и HTML.. Эта библиотека предоставляет нам очень большой выбор различных функций и методов по доступу к атрибутам и содержимому выбранных элементов. Итак, давайте приступим.

1. Создание HTML разметки.

Первым делом создадим визуальную часть нашего скрипта, то есть разметку на основе HTML. Для этого создадим новый файл под названием index.html. Вот с таким содержимым:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Таймер обратного отсчета</title>
</head>
<body>
	<div id="timer_wrap">
		<div id="clock">
			<div id='day'>
				<p id='day0'></p>
				<p id='day1'></p>
			</div>
			<div id="razd">
				:
			</div>
			<div id='hour'>
				<p id='hour0'></p>
				<p id='hour1'></p>
			</div>
			<div id="razd">
				:
			</div>
			<div id='min'>
				<p id='min0'></p>
				<p id='min1'></p>
			</div>
			<div id="razd">
				:
			</div>
			<div id='sec'>
				<p id='sec0'></p>
				<p id='sec1'></p>
			</div>
		</div>		
	</div>
</body>
</html>

Как Вы видите имеется общий контейнер с идентификатором id=»timer_wrap», в котором будет расположен наш таймер. В нем содержится вспомогательный контейнер с идентификатором id=»clock», который служит для более красивого отображения таймера. Далее обратите внимание, что в контейнерах с идентификаторами id=’day’, id=’hour, ‘id=’min’, id=’sec’ будут содержатся — дни, часы, минуты и секунды соответственно. Между этими контейнерами вставлены блоки с идентификаторами id=»razd», которые служат разделителями для каждого элемента таймера (как обычно разделитель для времени — это символ «:»). Так как каждый элемент времени таймера (секунды, минуты, часы, дни) выводится в двузначном формате, то для более красивого отображения времени я предусмотрел для каждого разряда времени свой блок. К примеру, для отображения секунд предусмотрен блок с идентификатором id=’sec’ и для каждого разряда предусмотрен свой блок: для единиц — блок id=’sec1′, для десятков — id=’sec0′. Остальные элементы времени по аналогии.

Теперь необходимо создать файл для хранения правил css, для нашего скрипта, как Вы видите я подключаю файл style.css, поэтому его и создадим. Вот его содержимое:

#hour,#min,#sec,#day {
	float:left;
	padding:5px;
	width:48px;
	height:55px;
	position:relative;
	display:block;
}
			
p {
	margin:0px;
	padding:0px;
	width:24px;
	height:55px;
	float:left;
	color:#ffffff;
	font-size:3em;
	font-weight:bold;
	position:absolute;
}
#sec1,#min1,#hour1,#day1 {
	margin-left:24px;
}
#timer_wrap {
	background-color:#515151;
	border-radius:10px;
	height:65px;
	width:340px;
	padding:15px 18px;
}		
#clock {
	border:1px solid white;
	border-radius:10px;
	height:65px;
	width:298px;
	background:url(clock.jpg) left top no-repeat;
	padding:0px 20px 0px 20px;
	position:absolute;
}
#razd {
	float:left;
	color:#ffffff;
	font-weight:bold;
	font-size:3em;
	margin:0px 3px 0px 3px;
}
#stop {
	color:white;
	font-size:2em;
	margin:15px 10px 10px 25px;
	position:absolute;
}

Теперь, если посмотреть в браузере, то мы увидим вот такую заготовку для нашего таймера.

Теперь нам осталось создать сам таймер и вывести на экран.

2. Подготовка к кодированию на Javascript.

Первым делом давайте создадим пустой файл script.js, в котором будут храниться скрипты на языке Javascript, и сохраним его в папке js. Далее давайте подключим этот файл к нашему скрипту (между тегами head):

<script type="text/javascript" src="js/script.js"></script>

Далее нам понадобится библиотека jQuery, которую можно скачать с официального сайта http://jquery.com кликнув по кнопочке DOWNLOAD. После скачивания библиотеки также ее сохраним в папке js и подключим к нашему скрипту:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

3. Создаем логику таймера.

Итак, для начала перейдем в файл script.js и откроем код для работы с библиотекой jQuery:

$(document).ready(function () {
//код jQuery

});

Как Вы помните, для того что бы начать работу с библиотекой jQuery, необходимо выбрать элемент document нашей страницы, и для него вызвать обработчик события ready (который сработает после полной загрузки страницы), и в этом обработчике описываем функцию в теле которой и ведем кодирование с использованием библиотеки jQuery.

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

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

Месяц День,Год ЧЧ:ММ

К примеру, если мы хотим назначить датой отсчета 1 июля 2012 года и время 12.00, то строку необходимо сформировать таким образом:

July 1,2012 12:00

Теперь давайте приведу часть кода функции для дальнейших пояснений:

//функция вызова таймера
function get_timer() {
	
	//Дата для обратного отсчета
	var date_new = "May 22,2012 22:00";
	////////////////////////////////////
	////////////////////////////////////
	
	//Объект даты для обратного отсчета
	var date_t = new Date(date_new);
	//Объект текущей даты
	var date = new Date();
	//Вычисляем сколько миллисекунд пройдет 
	//от текущей даты до даты отсчета времени
	var timer = date_t - date;
	
}

Обратите внимание, далее создаем объект класса Date (записываем его в переменную date_t) и передаем его конструктору — дату отсчета времени. Класс Date предназначен для работы с датами и временем. Если конструктору, не передавать ни каких значений, то будет создан объект класса Date с текущими датой и временем. Которую, мы можем вывести, если нам это необходимо. Дата и время в объекте Date, хранятся не в явном виде, а в виде количества миллисекунд прошедших с 0 часов 0 минут 1 января 1970 года. Поэтому мы можем узнать, сколько пройдет миллисекунд между временем отсчета и текущей датой, что мы и делаем и сохраняем результат в переменную timer.

То есть в переменной timer у нас содержится количество миллисекунд до времени отсчета. Значит, нам осталось только узнать, сколько это будет дней, часов, минут и секунд, а затем просто вывести это на экран. Первым делом переведем миллисекунды в привычное для нас время (продолжаем кодировать функцию get_timer()):

//Проверяем не нужно ли закончить отсчет
	//если дата отсчета еще не истекла, то количество
	//миллисекунд в переменной date_t будет больше чем в переменной date
	if(date_t > date) {
		
		//Вычисляем сколько осталось дней до даты отсчета.
		//Для этого количество миллисекунд до даты отсчета делим
		//на количество миллисекунд в одном дне
		var day = parseInt(timer/(60*60*1000*24));
		//если полученное число меньше 10 прибавляем 0
		if(day < 10) {
			day = '0' + day;
		}
		//Приводим результат к строке
		day = day.toString();
			
		//Вычисляем сколько осталось часов до даты отсчета.
		//Для этого переменную timer делим на количество
		//миллисекунд в одном часе и отбрасываем дни
		var hour = parseInt(timer/(60*60*1000))%24;
		//если полученное число меньше 10 прибавляем 0
		if(hour < 10) {
			hour = '0' + hour;
		}
		//Приводим результат к строке
		hour = hour.toString();
			
		//Вычисляем сколько осталось минут до даты отсчета.
		//Для этого переменную timer делим на количество
		//миллисекунд в одной минуте и отбрасываем часы
		var min = parseInt(timer/(1000*60))%60;
		//если полученное число меньше 10 прибавляем 0
		if(min < 10) {
			min = '0' + min;
		}
		//Приводим результат к строке
		min = min.toString();
			
		//Вычисляем сколько осталось секунд до даты отсчета.
		//Для этого переменную timer делим на количество
		//миллисекунд в одной минуте и отбрасываем минуты
		var sec = parseInt(timer/1000)%60;
		//если полученное число меньше 10 прибавляем 0
		if(sec < 10) {
			sec = '0' + sec;
		}
		//Приводим результат к строке
		sec = sec.toString(); 
	}
	else {
		$("#clock").html("<span id='stop'>Отсчет закончен!!!</span>");
	}

Итак, для начала сделаем небольшую проверку, но то, не закончен ли отсчет. Если количество миллисекунд в переменной date_t больше чем в переменной – date, значит необходимо продолжать отсчет. Если же меньше – то мы с помощью jQuery производим выборку блока с идентификатором clock ($(«#clock»)) и при помощи метода html() вставляем в выбранный блок данные, которые переданы ему параметром (метод html() выводит данные, которые переданы ему параметром, в выбранный блок).

Первым делом найдем количество дней до даты отсчета. Для этого переменную таймер делим на количество миллисекунд в одном дне, а это можно узнать из выражения – 24*60*60*1000 (в одной секунде 1000 миллисекунд, в одной минуте 60 секунд, в одном часе 60 минут и в одном дне 24 часа). С помощью функции parseInt() мы отбрасываем у результата дробную часть, так как эта функция, приводит строку, переданную ей параметром, к целочисленному результату (попросту говоря, возвращает число, а если это невозможно, то NaN). Далее если получившееся число меньше 10 – добавляем 0, так как каждый элемент времени нужно выводить в двузначном формате. И затем с помощью метода toString() приводим получившийся результат (переменную day), к строковому типу данных (это нам понадобится для более красивого отображения времени, но об этом позже). Как видите здесь все просто – немного математики и все.

Далее часы определяем по аналогии с днями, только переменную делим уже на количество миллисекунд в одном часе. Но теперь необходимо отбросить дни, так как мы сейчас получили общее количество часов до указанной даты отсчета. Для этого мы с помощью операции – остаток от деления отбрасываем дни. Для обозначения этой операции используется символ — % и возвращает эта операция — остаток от деления левого операнда на правый операнд. То есть мы как бы делим общее число получившихся часов на 24 (количество часов в одном дне) и берем от результата только остаток от деления – так как целая часть от деления – это уже дни, а мы их уже получили.

Затем находим минуты – все по аналогии. Переменную таймер делим на количество миллисекунд в одной минуте и отбрасываем часы (как и в примере выше – берем остаток от деления общего количества минут на 60 – количество минут в одном часе).

И последнее, находим секунды. Для этого все также делим переменную таймер на количество миллисекунд в одной секунде и отбрасываем минуты. Все также берем остаток от деления общего количества секунд на 60 – количество секунд в одной минуте.

Итак, в принципе таймер у нас готов осталось красиво его вывести на экран и периодически вызывать созданную нами функцию. Но перед этим давайте себя проверим и выведем на экран то что у нас получилось. Для этого вставим в функцию код (ниже после расчета секунд):

alert(day + " : " + hour + " : " + min + " : " + sec);

Затем после кода функции вызовем ее на исполнение:

//Вызываем функцию на исполнение
get_timer();

И теперь, задав любое время для отсчета таймера, переходим в браузер и обновим нашу страничку. Как Вы видите, появилась надпись с временем которое остается до указанной даты отсчета.

4. Выводим таймер на экран.

Но, конечно, сейчас наш таймер не работает, так как он не считает время. Вернее считает, но делает всего один замер времени за один вызов функции. Поэтому давайте это исправим, а заодно красиво выведем наш таймер на экран (код с функцией alert(), можно удалить, либо закомментировать):

//Выводим дни
		//Проверяем какие предыдущие цифры времени должны вывестись на экран
		//Для десятков дней
		if(day[1] == 9 && 
			hour[0] == 2 && 
			hour[1] == 3 && 
			min[0] == 5 && 
			min[1] == 9 && 
			sec[0] == 5 && 
			sec[1] == 9) {
			animation($("#day0"),day[0]);
		}
		else {
			$("#day0").html(day[0]);
		}
		//Для единиц  дней
		if(hour[0] == 2 && 
			hour[1] == 3 && 
			min[0] == 5 && 
			min[1] == 9 && 
			sec[0] == 5 && 
			sec[1] == 9) {
			animation($("#day1"),day[1]);
		}
		else {
			$("#day1").html(day[1]);
		}
		//Выводим часы
		//Проверяем какие предыдущие цифры времени должны вывестись на экран
		//Для десятков часов
		if(hour[1] == 3 && 
			min[0] == 5 && 
			min[1] == 9 && 
			sec[0] == 5 && 
			sec[1] == 9) {
			animation($("#hour0"),hour[0]);
		}
		else {
			$("#hour0").html(hour[0]);
		}
		//Для единиц часов	
		if(min[0] == 5 && 
			min[1] == 9 && 
			sec[0] == 5 && 
			sec[1] == 9) {
			animation($("#hour1"),hour[1]);
		}
		else {
			$("#hour1").html(hour[1]);
		}
			
		//Выводим минуты
		//Проверяем какие предыдущие цифры времени должны вывестись на экран
		//Для десятков минут
		if(min[1] == 9 && 
			sec[0] == 5 && 
			sec[1] == 9) {
			animation($("#min0"),min[0]);
		}
		else {
			$("#min0").html(min[0]);
		}
		//Для единиц минут
		if(sec[0] == 5 && sec[1] == 9) {
			animation($("#min1"),min[1]);
		}
		else {
			$("#min1").html(min[1]);
		}
			
		//Выводим секунды
		//Проверяем какие предыдущие цифры времени должны вывестись на экран
		//Для десятков секунд
		if(sec[1] == 9) {
			animation($("#sec0"),sec[0]);
		}
		//Для единиц секунд
		else {
			$("#sec0").html(sec[0]);
		}
		animation($("#sec1"),sec[1]);	
		//Периодически вызываем созданную функцию, 
		//интервал вызова одна секунда(1000 милли секунд)
		setTimeout(get_timer,1000);

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

Обратите внимание, в самом конце кода функции, я вызываю функцию setTimeout(), с помощью которой, вызывается наша создаваемая функция через одну секунду (она вызывается ровно один раз). То есть мы один раз функцию вызываем сами, а последующие разы, она вызывает себя сама с интервалом в одну секунду.

Теперь так как переменные day, hour, min и sec у нас имеют строковый тип данных, то мы можем обращаться к любому символу этих переменных используя индексы — их номера в строке. К примеру если в переменной day у нас записана строка 10, то 1 — это символ с индексом 0, а 0 — с индексом 1, значит для вывода первого символа этой переменной можно написать вот так day[0].

Далее (пояснения веду с конца кода функции) выводим на экран единицы секунд (как я и говорил секунды выводятся в двузначном формате — первое число это десятки, второе — единицы) . Для вывода используем функцию animation() (код которой я приведу ниже), которая используется для анимированного вывода элементов таймера. То есть единицы секунд у нас выводятся всегда с анимацией, так как они изменяются каждую секунду. Далее, десятки секунд нужно выводить с анимацией только тогда, когда единицы секунд равны 9 (sec[1] == 9), так как в этом случае десятки изменят свое значение. В противном случае десятки должны быть неподвижны. Значит если sec[1] == 9, то мы выводим десятки секунд при помощи функции animation($(«#sec0″),sec[0]), если же нет, то мы выводим десятки попросту используя метод html() ($(«#sec0″).html(sec[0]);).

Далее единицы минут, нужно выводить с анимацией только тогда, когда десятки секунд равны 5 (sec[0] == 5) и единицы секунд равны 9 (sec[1] == 9). Затем десятки минут также необходимо выводить с анимацией лишь тогда, когда единицы минут равны 9 (min[1] == 9 ) и десятки секунд равны 5 (sec[0] == 5) и единицы секунд равны 9 (sec[1] == 9).

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

Теперь приведу код функции, которая выводит на экран элементы таймера при помощи анимации:

//Функция для красивого отображения времени.
function animation(vibor,param) {
	vibor.html(param)
		.css({'marginTop':'-20px','opacity':'0'})
		.animate({'marginTop':'0px','opacity':'1'});
}

Первым делом обратите внимание на параметры, которые необходимо передавать этой функции. Первый параметр — это обычная выборка jQuery, к примеру $(«#min0″). Второй параметр — это данные, которые мы вставляем в выбранный блок (а выборка у нас передается в переменную vibor). Затем мы пишем выборку (сохраненную в переменной vibor), далее вызываем метод html() – которому передаем параметром переменную param (а в ней сохранены данные для вставки). Затем вызываем метод css() с помощью которого задаем стили для нашей выборки. То есть мы немного поднимаем выбранный блок вверх, при помощи правила marginTop (обратите внимание как в этом методе записываются правила состоящие из двух слов), со значением в -20px и задаем полную прозрачность выбранного блока, то есть как бы скрываем данный блок. Далее вызываем метод animate(), который дает возможность нам, создавать пользовательскую анимацию опираясь на правила css, которые мы ему передаем. К примеру, если у блока ширина 100px и методу animate() мы передаем правило для ширины равное 300px. То на экране мы увидим плавное увеличение ширины блока до 300px.

Методу animate() мы передаем правила css, которые будут опускать выборку на свое обычное местоположение, а также убирать прозрачность в блоке с выборкой.

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

Как мне кажется, таймер получился довольно неплохой и красивый.

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

Если возникнут вопросы — пишите, постараемся на них ответить. Всего доброго! Удачного Вам кодирования и до новых встреч!!!

Хотите узнать, что необходимо для создания сайта?

Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (55)

  1. Сергей

    Давно искал информацию таком таймере,попробую создать.

  2. Станислав

    Строка 4:
    вместо if(date_t > date) {
    ставим if(timer > 0) {

    • Виктор Гавриленко

      Можно и так :) , ну а в принципе какая разница?

      • Станислав

        Привычка оптимизировать код :) Сравнение переменной с константой быстрее, чем двух переменных. Такая оптимизация в программе, выполняемой постоянно, снижает нагрузку на процессор.

  3. Алексей

    Есть такая проблема, необходимо сделать или адаптировать уже существующий счетчик обратного времени, который будет считать до определенной даты гггг:мм:дд чч:мм:сс, после чего должно появиться изображение, ссылка…
    дело в том что методов на самом деле куча, вот только задача тут больше для СSS. необходимо сделать анимацию как в часах, настольных. Просто никак не пойму как связать допустим картинку цифры с самим таймером, и где этот код вообще добавлять нуджно?

    • Андрей Кудлай

      Алексей, такие вопросы гораздо удобнее решать на форуме. Создайте тему на нашем форуме и Вам постараются помочь.

  4. Максим

    Как можно сделать так чтобы счётчик был по середине, а не слева?

  5. Шамиль

    Подскажите пож как сделать таймер обратного отсчтета времени так чтобы он начинал отстчет только тогда когда человек перейдет на страницу с таким таймером а пока не перешел таймер будет как бы в режиме ожидания и ждать пока человек на него перейдет. Как только переход состтоится он найчнет свой обратный отсчет до наступления часа х

  6. Шамиль

    Скажите как это сделать технически . Очень нужно ечть ли сам скрипт и исходники?

  7. Femil

    Спасибо огромное! Счетчик просто прелесть! И работает )))

  8. михаил

    подходит ли этот скрипт, если дней 100 и более(если нет подскажите или киньте ссылку).
    спасибо

  9. Григорий

    Спасибо за урок!
    Подскажите пожалуйста,какире изменения нужно внести в скрипт,чтобы таймер стал циклическим,т.е. при обнулении запускался по-новому.Интересует недельный интервал (168 часов(7*24))

    • Виктор Гавриленко

      Здравствуйте, Григорий!
      такие вопросы лучше всего решать у нас форуме! Создайте тему, и думаю мы решим данный вопрос.
      Скорее всего достаточно одной проверки, то есть если время закончилось заново запускать таймер.

  10. Vick

    Подскажите, как сделать, чтобы таймер запускался несколько раз на странице (для списка акций)?

    • Виктор Гавриленко

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

      • Vick

        Да, действительно работает! Сделал на ModX Evo — дописал конструкцию _[+id+] для get_timer и для идентификаторов времени.
        Спасибо Вам за работу и помощь!

  11. Рома

    Здравствуйте. Скажите, пожалуйста. А как быть с часовыми поясами? У пользователей из разных стран оставшееся время получается разное. Как сделать чтобы отчет велся до определенной даты по серверному времени?

    • Андрей Кудлай

      Здравствуйте.
      Логично, что коль нужно использовать серверное время, то нужно писать еще и серверный скрипт, который и будет возвращать серверное время.
      В общем же случае для скрипта обратного отсчета серверное время совсем не нужно, поскольку этот скрипт отсчитывает определенный промежуток времени не от заданного времени на сервере (т.е. не одинаковое время для всех посетителей), а с момента обращения конкретного пользователя к скрипту (т.е. начальная и конечная точка для каждого конкретного пользователя будет своя).

  12. Екатерина

    Здравствуйте! У меня почему то буквы соединяются в таймере. пробовала пробелы , паддинги маргины никак не получается. Как поставлю на сайт так часы буква на букве , минуты и секунды, десятичная на единицах. Вот скриншот — joxi.ru/RnI_Utg5CbAGWT91bUI помогите, надо было я вчера. благодарю.

    • Андрей Кудлай

      Здравствуйте, Екатерина.
      А посоветуйте, пожалуйста, любой вариант помощи, который Вам подойдет… мы ведь даже код не видим. Создайте, пожалуйста, тему на нашем форуме, дайте ссылку на таймер и только тогда можно будет что-то подсказать… пока же можно лишь посмотреть на скриншот и сказать, что да, проблема действительно есть.

  13. Екатерина

    Все сделала как Вы просили. http://webformyself.com/forum/index.php/topic/1418/ Прошу Вас ответить как моно скорей, заранее благодарная, Екатерина.

  14. Андрей

    Учите матчасть. Действительно. Ничего сложного. В инете полно примеров по любой команде JavaScript. Я выдернул счетчик из буржуйского сайта, адаптировал под свой сайт — цвет и размер меняется. А еще тема — я смог зациклить счетчик и написать условий if, от которых зависит время. Вообще, полет фантазии неограничен. Вот мой сайт с счетчиком: habfast.ru
    А еще можно сделать из счетчика времени — счетчик, который будет отображать якобы оставшийся товар на складе :)

  15. Алексей

    Я не понял, куда вставлять

    alert(day + » : » + hour + » : » + min + » : » + sec);
    get_timer();

    • Виктор Гавриленко

      Здравствуйте!
      Данный участок кода нужен просто для проверки работоспособности кода. И вставлять его нужно внутри кода функции get_timer(). Технические вопросы по урокам решаются на форуме. так что если еще возникнут вопросы. Создавайте тему у нас на форуме и мы Вам обязательно поможем.

  16. Денис

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

    • Андрей Кудлай

      Варианты рассмотрены в комментариях к следующему уроку — Индивидуальный таймер…

  17. Марина

    Установила таймер, все нормально. Только по окончанию отчета времени, вместо отсчет закончен пишет ромбики и они смещены от таймера. Как исправить, подскажите, пожалуйста.

  18. Артем

    Здравствуйте. не пойму как сделать, чтобы функция выполнялась для разных акций. Функцию объявил так function get_timer(idcur)
    Дата такого формата: 2014.01.30 17:20:10
    ID беру так:
    var kuponendtime=$(«#»+idcur).val();
    var curdate = new Date(kuponendtime.substr(0, 4)+»-»+kuponendtime.substr(5, 2)+»-»+kuponendtime.substr(8, 2));
    curdate.setHours(kuponendtime.substr(11, 2),kuponendtime.substr(14, 2),kuponendtime.substr(17, 2),0);
    var date_new = curdate;

    таймер так обозначаю setTimeout(get_timer(idcur),1000);

    Функцию вызываю так: get_timer(‘kuponendtime1′);
    В итоге у меня при обновлении сайта подвисать на 2-3 секунды страница начинает и выводит только один раз. таймер не выполняется.
    Что не правильно сделал?

    • Андрей Кудлай

      Здравствуйте, Артем.
      Лучше будет, если зададите автору вопрос на нашем форуме. Там гораздо удобнее решать вопросы, связанные с кодом. Там же можете приложить архив с проектом, чтобы его можно было скачать и запустить у себя на компьютере, а не разбирать код умозрительно.

  19. Дмитрий Щедрин

    Как теперь вставить данный скрипт в нужное место на странице сайта?

    • Андрей Кудлай

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

      • Дмитрий Щедрин

        Я в этом плане чайник, дайте пож-та пример как это сделать

        • Андрей Кудлай

          Так пример ведь есть в исходниках — это индексный файл. Берете из него разметку таймера и вставляете в нужное место страницы сайта. Затем подключаете скрипты и стили. Это общий план. Конкретная реализация индивидуальна и зависит уже от того, как устроена работа сайта. На нашем форуме можете создать тему и задать там более конкретный вопрос.

  20. Александр

    Здравствуйте не могли бы вы помочь мне объяснить по простому мне нужно таймер поставить на landing я делаю его в Web builder а то я языки программирования вообще не знаю я вам заплачу за консультация

  21. Анатолий

    Здравствуйте! Не хочу умничать, но думаю вы будете согласны со мной, условие анимации десятка часов НЕКОРРЕКТНО задано, так как при значении таймера 13:59:59 — анимируется 1ка десятка часов (в условии стоит 3 в единицах часов) и при значении таймера 09:59:59 — десяток часов с 1 на 0 не анимируется, а просто сразу меняется на 0. (но по сравнению со всем действием кода — это конечно мелочь, на которую рядовой пользователь не обратит своего внимания) :)

    Поправил немного условие анимации «десятка часов» — прикладываю кусок исправленного кода:

    //Для десятков часов
    if( hour[0] == 2 &&
    hour[1] == 3 &&
    min[0] == 5 &&
    min[1] == 9 &&
    sec[0] == 5 &&
    sec[1] == 9
    ||
    hour[1] == 9 &&
    min[0] == 5 &&
    min[1] == 9 &&
    sec[0] == 5 &&
    sec[1] == 9 ) {
    animation($(«#hour0″),hour[0]);
    }

    P.S.: Будем считать, что это решение «скрытого домашнего задания» :) ))
    В любом случае урок классный! Спасибо вам Виктор!

  22. Iryna

    Отличный урок, мне очень понравился! Нашла ответы на свои вопросы и много узнала нового)
    Спасибо Вам огромное, Виктор.

  23. Владимир

    Как должен выглядеть код, если мне дни не нужны, а для отсчета времени нужны только часы, минуты и секунды ?

  24. Анатолий

    Здравствуйте! Подскажите пожалуйста, как сделать, чтобы таймер отсчитывал время не днями, а часами, например, если поставить 3 дня, то он писал бы 72 часа 00 минут?

    • Виктор Гавриленко

      Здравствуйте, Анатолий!
      Для этого не нужно рассчитывать количество оставшихся дней, а только определить сколько осталось часов, без учета дней. То есть в выражении var hour = parseInt(timer/(60*60*1000))%24;, не нужно делить на 24.

  25. Александр

    Урок класс, стал вопрос, как сделать так что при нажатии на ссылку появлялся таймер и начинал отсчет времени?

  26. Кирилл

    Я так понял, что ваш таймер не дружит с годами.
    Вы сами-то его тестировали???
    Например, при вводе такой даты:
    var date_new = «November 23,2016 00:00″;
    Таймер выводит 39 часов…
    Что это за ХРЕНЬ!!!!!!

    • Виктор Гавриленко

      Здравствуйте!
      Для начала, хотел бы Вас попросить не использовать не цензурную лексику на нашем сайте.
      По поводу вопроса: в уроке я показал как реализовать таймер обратного отсчета, при этом в уроке я говорил, что таймер отображает количество дней в формате двухзначного числа, при этом до указанной Вами даты — 393 дня, то есть скрипт работает верно, только необходимо отобразить на экране недостающий разряд (число) и все будет нормально.

      • Кирилл

        Да, за лексику в моем предыдущем комментарии простите.. Я уже и сам понял, почему таймер не считает года. Но вот вопрос, который, думаю, будет интересен многим: как выводить несколько таких таймеров на одной странице с разным значением времени? Причем значение времени обязательно нужно брать из MySQL. Неделю мучаю этот таймер (или он меня..), но не могу разобраться. К тому же, в файл script.js нельзя вписать код PHP, который вставляет значение времени, взятое из MySQL.

        • Виктор Гавриленко

          Если необходимо использовать несколько таймеров на одной странице, то необходимо переписать код функции таймера, логическую часть можно оставить без изменений, а все что касается отображения на экран необходимо изменить, так как в функции мы обращаемся к созданным блокам и отображаем в них соответствующее время, для нескольких таймеров, соответственно будет несколько блоков для времени. По поводу передачи переменных из PHP в JavaSacript, можете посмотреть урок по следующей ссылке Ссылка

          • Кирилл

            Виктор, спасибо Вам за отличные уроки, вы профи. Хотел я задать еще пару вопросов, для чего зарегистрировался на вашем форуме, но, к сожалению, после регистрации и активации я не могу ни создавать новые темы, ни отвечать в существующих. Странный у вас форум, «демократичный» такой…

          • Андрей Кудлай

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

  27. Кирилл

    Спасибо, Андрей, запись действительно активирована. Ответ на свой вопрос я на форуме уже нашел, даже не пришлось спрашивать. Благодарю.

  28. feuer81

    каким образом сделать, чтобы время начала отсчета было привязано не к дате, а ко времени захода посетителя на сайт?
    Я так понимаю, нужна привязка к кукам?

  29. Александр

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

  30. Юрий

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree