Перейти к содержимому


Таймер Обратного Отсчета Времени


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 87

#21 maza1204

maza1204

    Пользователь

  • Пользователи
  • PipPip
  • 20 сообщений

Отправлено 09 Апрель 2013 - 10:39

 Vaccina (10 Май 2012 - 17:27) писал:

Разметку HTML необходимо поместить в шаблон "HTML" или "Страница", а javascript в файл main.js

Если я правильно понимаю, то надо сделать так:
1. Закачать файл jquery.countdown
2. Заккачать картинки для анимации
3. В шаблон HTML
после строки <div id="header" class="container"> dcnfdbnm
<div style="position:absolute;z-index:2;left:120px;top:80px;">
<div id="counter"></div>
<div class="desc">
<div>Дни</div>
<div>Часы</div>
<div>Минуты</div>
<div>Секунды</div>
</div>
<a href="" onclick="$('#counter').countdown('pause');return false">Пауза</a> | <a href="" onclick="$('#counter').countdown('start');return false">Старт</a>
<br />
<br />
<br />
<div id="counter_2"></div>
<div class="desc">
<div>Минуты</div>
<div>Секунды</div>
</div>
</div>
4. В файл main.js вставить
<script src="js/jquery.countdown.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#counter').countdown({
image: 'img/digits.png',
startTime: '01:12:12:00'
});

$('#counter_2').countdown({
image: 'img/digits.png',
startTime: '00:10',
timerEnd: function(){ alert('Время вышло!'); },
format: 'mm:ss'
});
});
</script>
Я так все сделал, но ничего не получилось. Подскажите что не так.
И как убрать кнопки "Старт" и "Пауза" чтобы отсчет происходил к заданной дате?

#22 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 09 Апрель 2013 - 11:05

 maza1204 (09 Апрель 2013 - 10:39) писал:

Если я правильно понимаю, то надо сделать так:
1. Закачать файл jquery.countdown
2. Заккачать картинки для анимации
3. В шаблон HTML
после строки <div id="header" class="container"> dcnfdbnm
<div style="position:absolute;z-index:2;left:120px;top:80px;">
<div id="counter"></div>
<div class="desc">
<div>Дни</div>
<div>Часы</div>
<div>Минуты</div>
<div>Секунды</div>
</div>
<a href="" onclick="$('#counter').countdown('pause');return false">Пауза</a> | <a href="" onclick="$('#counter').countdown('start');return false">Старт</a>
<br />
<br />
<br />
<div id="counter_2"></div>
<div class="desc">
<div>Минуты</div>
<div>Секунды</div>
</div>
</div>
4. В файл main.js вставить
<script src="js/jquery.countdown.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#counter').countdown({
image: 'img/digits.png',
startTime: '01:12:12:00'
});

$('#counter_2').countdown({
image: 'img/digits.png',
startTime: '00:10',
timerEnd: function(){ alert('Время вышло!'); },
format: 'mm:ss'
});
});
</script>
Я так все сделал, но ничего не получилось. Подскажите что не так.
И как убрать кнопки "Старт" и "Пауза" чтобы отсчет происходил к заданной дате?


В вашем таймере вы неверно указали пути до изображений, например, вместо :
image: 'img/digits.png',
нужно так:
image: '{ASSETS_IMAGES_PATH}digits.png',
При этом сами изображения загрузить через Сайт-Редактор тем- Файлы

Можете попробовать поставить такой таймер - http://forum.storela...__80#entry58308

#23 maza1204

maza1204

    Пользователь

  • Пользователи
  • PipPip
  • 20 сообщений

Отправлено 09 Апрель 2013 - 11:21

 miyako (09 Апрель 2013 - 11:05) писал:

В вашем таймере вы неверно указали пути до изображений, например, вместо :
image: 'img/digits.png',
нужно так:
image: '{ASSETS_IMAGES_PATH}digits.png',
При этом сами изображения загрузить через Сайт-Редактор тем- Файлы

Можете попробовать поставить такой таймер - http://forum.storela...__80#entry58308

Я поменял, но картинка все равно не поменялась. пробовал еще менять в строке
<script src="js/jquery.countdown.js" type="text/javascript"></script>
ссылку на jquery.countdown.js и тоо же ничего не получилось

#24 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 09 Апрель 2013 - 13:24

 maza1204 (09 Апрель 2013 - 11:21) писал:

Я поменял, но картинка все равно не поменялась. пробовал еще менять в строке
<script src="js/jquery.countdown.js" type="text/javascript"></script>
ссылку на jquery.countdown.js и тоо же ничего не получилось

исправьте код:
<script src="js/jquery.countdown.js" type="text/javascript"></script>
на:
<script src="{ASSETS_JS_PATH}jquery.countdown.js" type="text/javascript"></script>
и добавьте прежний код скрипта на страницу.
То есть:
<script type="text/javascript">
$(function(){
$('#counter').countdown({
image: 'img/digits.png',
startTime: '01:12:12:00'
});
$('#counter_2').countdown({
image: 'img/digits.png',
startTime: '00:10',
timerEnd: function(){ alert('Время вышло!'); },
format: 'mm:ss'
});
});
</script>
и этот:
<div style="position:absolute;z-index:2;left:120px;top:80px;">
<div id="counter"></div>
<div class="desc">
<div>Дни</div>
<div>Часы</div>
<div>Минуты</div>
<div>Секунды</div>
</div>
<a href="" onclick="$('#counter').countdown('pause');return false">Пауза</a> | <a href="" onclick="$('#counter').countdown('start');return false">Старт</a>
<br />
<br />
<br />
<div id="counter_2"></div>
<div class="desc">
<div>Минуты</div>
<div>Секунды</div>
</div>
</div>


#25 tanch

tanch

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 300 сообщений
  • ГородНовосибирск

Отправлено 20 Май 2013 - 07:28

Здравствуйте.
Пробовала по всякому поставить этот таймер.
Не выходит!
добилась только появления в столбик:
  Дни
Часы
Минуты
Секунды

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

Таймер хотелось бы очень установить поверх банера на главной, под него уже и место сделано
Помогите пожалуйста!!!
мой сайт

#26 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 20 Май 2013 - 11:50

 tanch (20 Май 2013 - 07:28) писал:

Здравствуйте.
Пробовала по всякому поставить этот таймер.
Не выходит!
добилась только появления в столбик:
  Дни
Часы
Минуты
Секунды

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

Таймер хотелось бы очень установить поверх банера на главной, под него уже и место сделано
Помогите пожалуйста!!!
мой сайт

Какой вы таймер пытались поставить? И на какую страницу?

#27 tanch

tanch

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 300 сообщений
  • ГородНовосибирск

Отправлено 20 Май 2013 - 19:19

http://pcvector.net/...o-otscheta.html
на главную
13.jpg

#28 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 21 Май 2013 - 02:24

Пожалуйста, выполните инструкцию http://forum.storela...__20#entry58352

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

#29 tanch

tanch

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 300 сообщений
  • ГородНовосибирск

Отправлено 21 Май 2013 - 13:09

 Сake (21 Май 2013 - 02:24) писал:

Пожалуйста, выполните инструкцию http://forum.storela...__20#entry58352

и не убирайте изменения, чтобы мы могли понять причину ошибки.
Сделала изменения!
Пожалуйста - помогите как можно скорее, а то ошибка с наличием непростительная!!!

#30 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 21 Май 2013 - 13:37

 tanch (21 Май 2013 - 13:09) писал:

Сделала изменения!
Пожалуйста - помогите как можно скорее, а то ошибка с наличием непростительная!!!

Не нашла у вас на сайте файла -
jquery.countdown.js
Его нужно скачать и загрузить.
Попробуйте воспользоваться этой темой - http://forum.storela...птом/#entry8829

#31 tanch

tanch

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 300 сообщений
  • ГородНовосибирск

Отправлено 21 Май 2013 - 14:09

 miyako (21 Май 2013 - 13:37) писал:

Не нашла у вас на сайте файла -
jquery.countdown.js
Его нужно скачать и загрузить.
Попробуйте воспользоваться этой темой - http://forum.storela...птом/#entry8829

файл скачан и загружен!

откатила и сделала по предложенной теме
итог:
счетчика не вижу!
и сломался слайдер Новинок на главной!
еще и фон пропал!
и изменился размер шрифтов и весь шаблон поехал

Пожалуйста! помогите уже мне с этим счетчиком
или этот
или этот
и тоже очень хочется чтобы он был заведен на 3 дня и самозаводился

#32 tanch

tanch

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 300 сообщений
  • ГородНовосибирск

Отправлено 21 Май 2013 - 20:02

Почему приходится все время ждать помощи по нескольку часов/дней???
Что нужно чтобы ускорить этот процесс?

#33 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 22 Май 2013 - 04:38

Цитата

Почему приходится все время ждать помощи по нескольку часов/дней???
На данном форуме вы находитесь не одни, и другим пользователям так же как и вам необходима помощь. На нашей платформе техническая поддержка оказывается бесплатно, вы не платите за техническую поддержку как и другие пользователи. Модераторы вам пытаются помочь как можно чаще и лучше, а так же по мере своих возможностей.

Цитата

Что нужно чтобы ускорить этот процесс?
Обратитесь в любую платную дизайн студию где вам сделают дазайн по вашему заказу.

По вашему вопросу:

Удалите подключение файла "jquery.min.js" в шаблоне "HTML". Добавьте в ваш шаблон "HTML" после <div id="content">

<span id="clockJS"></span>

Далее в файл main.js добавьте

jQuery.cookie = function(name, value, options) {
	if (typeof value != 'undefined') { // name and value given, set cookie
		options = options || {};
		if (value === null) {
			value = '';
			options = $.extend({}, options); // clone object since it's unexpected behavior if the expired property were changed
			options.expires = -1;
		}
		var expires = '';
		if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
			var date;
			if (typeof options.expires == 'number') {
				date = new Date();
				date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
			} else {
				date = options.expires;
			}
			expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
		}
		// NOTE Needed to parenthesize options.path and options.domain
		// in the following expressions, otherwise they evaluate to undefined
		// in the packed version for some reason...
		var path = options.path ? '; path=' + (options.path) : '';
		var domain = options.domain ? '; domain=' + (options.domain) : '';
		var secure = options.secure ? '; secure' : '';
		document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
	} else { // only name given, get cookie
		var cookieValue = null;
		if (document.cookie && document.cookie != '') {
			var cookies = document.cookie.split(';');
			for (var i = 0; i < cookies.length; i++) {
				var cookie = jQuery.trim(cookies[i]);
				// Does this cookie string begin with the name we want?
				if (cookie.substring(0, name.length + 1) == (name + '=')) {
					cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
					break;
				}
			}
		}
		return cookieValue;
	}
};
function calcage(secs, num1, num2) {
	s = ((Math.floor(secs/num1))%num2).toString();
	if (LeadingZero && s.length < 2)
		s = "0" + s;
		return s;
}
function CountBack(secs) {
		if (secs < 100) {
			var new_date = new Date();
				$.cookie('target_date', new_date.setDate(new_date.getDate() + 3));
				//document.getElementById("clockJS").innerHTML = FinishMessage;
				return;
		}
		DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
		DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
		DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
		DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
		document.getElementById("clockJS").innerHTML = DisplayStr;
		if (CountActive)
			setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
$(function(){
  if($.cookie('target_date').length) {
		TargetDate = $.cookie('target_date');
  }
  else {
		TargetDate = new Date();
		$.cookie('target_date', TargetDate);
  }
  CountActive = true;
  CountStepper = -1;
  LeadingZero = true;
  DisplayFormat = "<span class='countdown_schet'>%%D%%:%%H%%:%%M%%:%%S%%</span>";
  FinishMessage = "Time's Up";
  CountStepper = Math.ceil(CountStepper);
  if (CountStepper == 0)
	CountActive = false;
	var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
	var dthen = new Date(TargetDate);
	var dnow = new Date();
	if(CountStepper>0)
		ddiff = new Date(dnow-dthen);
	else
		ddiff = new Date(dthen-dnow);
	gsecs = Math.floor(ddiff.valueOf()/1000);
	CountBack(gsecs);
});

далее в файл стилей main.css добавьте

#clockJS {
	height: 40px;
	position: absolute;
	right: 255px;
	top: 360px;
	width: 200px;
}


#34 tanch

tanch

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 300 сообщений
  • ГородНовосибирск

Отправлено 23 Май 2013 - 01:32

Здравствуйте!
Сake, сделала как Вы сказали.
Только сейчас:
1.Часы не появились
2. Сломался опять слайдер Новинок на главной
А почему "clockJS"
??
у меня сейчас загружен на сайт "jquery.countdown.js"
нужен какой-то другой файл? с именем "clock"?

#35 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 23 Май 2013 - 04:09

Переместите ваш код

<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
		 $(window).scroll(function () {
				 if ($(this).scrollTop() > 100) {
						 $('#back-top').fadeIn();
				 } else {
						 $('#back-top').fadeOut();
				 }
		 });
		 // scroll body to 0px on click
		 $('#back-top a').click(function () {
				 $('body,html').animate({
						 scrollTop: 0
				 }, 800);
				 return false;
		 });
});
});
</script>

из шаблона "HTML", вставив в файл main.js

$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
		 $(window).scroll(function () {
				 if ($(this).scrollTop() > 100) {
						 $('#back-top').fadeIn();
				 } else {
						 $('#back-top').fadeOut();
				 }
		 });
		 // scroll body to 0px on click
		 $('#back-top a').click(function () {
				 $('body,html').animate({
						 scrollTop: 0
				 }, 800);
				 return false;
		 });
});
});

Цитата

нужен какой-то другой файл? с именем "clock"?

нет, не нужен. Данному коду не нужны внешние библиотеки.

Так же переместите подключение файла

<script type="text/javascript" src="http://design.larec-ledenec.ru/main.js"></script>

ниже других js файлов, вставив его перед тегом </head>

#36 tanch

tanch

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 300 сообщений
  • ГородНовосибирск

Отправлено 23 Май 2013 - 04:42

Сделала
Никаких изменений не видно
Таймера по прежнему нет и сломанный слайдер на главной... :(

#37 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 23 Май 2013 - 05:53

Найдите в main.js

if($.cookie('target_date').length) {

и замените на

if($.cookie('target_date')) {

так же в файле стилей main.css найдите

#clockJS {
	height: 40px;
	position: absolute;
	right: 255px;
	top: 360px;
	width: 200px;
}

и замените на

#clockJS {
	height: 40px;
	position: absolute;
	right: 255px;
	top: 680px;
	width: 200px;
}


#38 tanch

tanch

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 300 сообщений
  • ГородНовосибирск

Отправлено 23 Май 2013 - 06:09

Слайдер починился! но только в гугл хром,
в Мозиле - поломатый
ТАЙМЕР так и не видать...
появилась надпись
NaN:NaN:NaN:NaN

#39 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 24 Май 2013 - 03:23

Найдите в вашем файле main.js

function CountBack(secs)

и замените на

function CountBack(secs, SetTimeOutPeriod)

далее найдите

TargetDate = $.cookie('target_date');

и замените на

TargetDate = parseInt($.cookie('target_date'));

далее удалите у вас в браузере куку(cookie) "target_date". После этих изменений таймер будет работать.

#40 tanch

tanch

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 300 сообщений
  • ГородНовосибирск

Отправлено 24 Май 2013 - 15:58

 Сake (24 Май 2013 - 03:23) писал:

Найдите в вашем файле main.js

function CountBack(secs)

и замените на

function CountBack(secs, SetTimeOutPeriod)

далее найдите

TargetDate = $.cookie('target_date');

и замените на

TargetDate = parseInt($.cookie('target_date'));

далее удалите у вас в браузере куку(cookie) "target_date". После этих изменений таймер будет работать.

Сделала!
появились циферки-часы, без анимации
формат: час, минута, секунда, миллисекунда
заведен на 2 часа
доходит 1,40 секунды и выдает вот такую ошибку
14.jpg

сама картинка часов у меня digits_transparent.png и эта digits.png
Вы ее нигде не указали?
или надо другую загрузить?

Слайдер починился! :)




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных