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


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


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

#41 Сake

Сake

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

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

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

Замените ваш код в main.js


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, SetTimeOutPeriod, DisplayFormat, CountActive, CountStepper) {
				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($.proxy(CountBack, this, (secs+CountStepper), SetTimeOutPeriod, DisplayFormat, CountActive, CountStepper),  "CountBack(" + (secs+CountStepper) + ", " + SetTimeOutPeriod + ", " + DisplayFormat + ", " + CountActive + ", " + CountStepper + ")", SetTimeOutPeriod);
}
$(function(){
  if($.cookie('target_date')) {
				TargetDate = parseInt($.cookie('target_date'));
  }
  else {
				TargetDate = new Date();
				$.cookie('target_date', TargetDate);
  }
  CountActive = true;
  CountStepper = -1;
  LeadingZero = true;
  DisplayFormat = "<span class='countdown_schet'><span class='countdown_schet-d'>%%D%%</span><span class='countdown_schet-h'>%%H%%</span><span class='countdown_schet-m'>%%M%%</span></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, SetTimeOutPeriod, DisplayFormat, CountActive, CountStepper);
});


на следующий


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($.proxy(CountBack, this, (secs+CountStepper)), SetTimeOutPeriod);
}
$(function(){
  if($.cookie('target_date')) {
				TargetDate = parseInt($.cookie('target_date'));
  }
  else {
				TargetDate = new Date();
				$.cookie('target_date', TargetDate);
  }
  CountActive = true;
  CountStepper = -1;
  LeadingZero = true;
  DisplayFormat = "<span class='countdown_schet'><span class='countdown_schet-d countdown-%%D%%'>%%D%%</span><span class='countdown_schet-h countdown-%%H%%'>%%H%%</span><span class='countdown_schet-m countdown-%%M%%'>%%M%%</span></span>";
  FinishMessage = "<span class='countdown_schet-finish'>Time's Up</span>";
  CountStepper = Math.ceil(CountStepper);
  if (CountStepper == 0)
		CountActive = false;
		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);
});


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

#42 tanch

tanch

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

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

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

Изменения сделала
Итог можете увидеть на главной
и на странице товара, находящегося в акции
там раньше был числовой счетчик, сейчас очень странно себя ведет..)

#43 tanch

tanch

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

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

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

Очень жду помощи!

#44 Сake

Сake

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

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

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

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

#45 tanch

tanch

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

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

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

Просмотр сообщенияСake (28 Май 2013 - 03:21) писал:

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

Хочу анимацию! :)
И, как я поняла - цикл через куки не лучший вариант..((
буду сама подводить часы, лишь бы они работали
Всё откатывать надо?

#46 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

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

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

#47 tanch

tanch

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

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

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

Просмотр сообщенияVaccina (28 Май 2013 - 05:24) писал:

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

Сделала откат
Сейчас на сайте есть файлы:
digits.png и jquery.countdown.js
Всё ещё нужны анимированные часы на Главной странице поверх банера про "Товар дня"

#48 Сake

Сake

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

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

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

Для использования countdown необходимо закачать и подключить его в шаблон "HTML" перед строкой

<script src="{ASSETS_JS_PATH}main.js"></script>

вставить

<script src="{ASSETS_JS_PATH}jquery.countdown.js"></script>

далее в файл main.js вставить

$(function(){
		$('#clockJS').countdown({
		  image: '{ASSETS_IMAGES_PATH}digits.png',
		  startTime: '01:12:12:00'
		});
	  });

далее в шаблон "HTML" вставить

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

после строки

<div id="content">

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

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

Если у вас какой-то шаг уже выполнен, то выполнять его повторно не нужно.

#49 tanch

tanch

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

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

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

Сake, сделала всё, как Вы сказали
и в той же последовательности!
Итог: часов не видать...
В чем у меня проблема??

#50 miyako

miyako

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

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

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

Просмотр сообщенияtanch (29 Май 2013 - 06:15) писал:

Сake, сделала всё, как Вы сказали
и в той же последовательности!
Итог: часов не видать...
В чем у меня проблема??

Вы сказали что у вас загружено изображение digits.png (http://forum.storela...__40#entry70047)
Но на сайте его не нашла. Проверьте пожалуйста еще раз. Если не загружено, то загрузите. (Сайт-Редактор шаблонов-Выберите файл)

#51 tanch

tanch

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

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

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

miyako, загружено
более того, удалила и снова загрузила
изменений нет

#52 miyako

miyako

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

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

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

Просмотр сообщенияtanch (29 Май 2013 - 06:46) писал:

miyako, загружено
более того, удалила и снова загрузила
изменений нет

Вероятно идет конфликт с js скриптами.
Нашла у вас в шаблоне HTML два подключения к a/b тестированию
<script src="//cdn.abtest.ru/js/17488.js"></script>
  <meta name="google-site-verification" content="bKXAnhBInud3l6Aa7sPbdcVLhPSMP6J6GwpWaSpG8lA" />
  <meta name='yandex-verification' content='4108b1fe582845ef' />
  <title>{PAGE_TITLE}</title>
	
  <!-- Скрипт для корректной работы A/B тестов -->
  <script type="text/javascript" src="http://cdn.abtest.ru/js/17488.js"></script>
  <!-- Подключение Js плагина -->
Чуть пониже еще одно.
<!-- Скрипт для корректной работы A/B тестов -->
  <script type="text/javascript" src="http://cdn.abtest.ru/js/17488.js"></script>
  <script type="text/javascript" src="{ASSETS_JS_PATH}cloud-zoom.1.0.2.js"></script>

Также перенесите main.js в конец блока <head></head>, То есть код:
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
удаляете
Находите
</head>
и заменяете на
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
</head>


#53 tanch

tanch

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

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

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

miyako, убрала, перенесла.
Где-то еще проблема...

#54 miyako

miyako

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

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

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

Просмотр сообщенияtanch (29 Май 2013 - 07:40) писал:

miyako, убрала, перенесла.
Где-то еще проблема...

Попробуйте еще раз удалить изображение digits.png и загрузить на сайт.

#55 tanch

tanch

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

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

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

сделала
и не в первый раз

#56 Сake

Сake

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

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

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

Вероятно переменная {ASSETS_IMAGES_PATH} не доступна все же в файле main.js можно поступить следующим образом - в шаблоне HTML после строки <body> вставьте

<span id="assets_images_path" rel="{ASSETS_IMAGES_PATH}" style="display: none;"></span>

далее в файле main.js найдите

$('#clockJS').countdown({
				  image: '{ASSETS_IMAGES_PATH}digits.png',
				  startTime: '01:12:12:00'
				});

и замените на

$('#clockJS').countdown({
				  image: $('#assets_images_path') + 'digits.png',
				  startTime: '01:12:12:00'
				});


#57 tanch

tanch

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

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

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

Просмотр сообщенияСake (30 Май 2013 - 01:39) писал:

Вероятно переменная {ASSETS_IMAGES_PATH} не доступна все же в файле main.js можно поступить следующим образом - в шаблоне HTML после строки <body> вставьте

<span id="assets_images_path" rel="{ASSETS_IMAGES_PATH}" style="display: none;"></span>

далее в файле main.js найдите

$('#clockJS').countdown({
				 image: '{ASSETS_IMAGES_PATH}digits.png',
				 startTime: '01:12:12:00'
			 });

и замените на

$('#clockJS').countdown({
				 image: $('#assets_images_path') + 'digits.png',
				 startTime: '01:12:12:00'
			 });

Не помогло...((
Уже сколько бьюсь я с этими часами!
Нет никаких подвижек!

#58 Сake

Сake

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

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

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

Прошу прощенья, допустил небольшую ошибку. Замените

$('#clockJS').countdown({
								 image: $('#assets_images_path') + 'digits.png',
								 startTime: '01:12:12:00'
						 });

на

$('#clockJS').countdown({
								 image: $('#assets_images_path').attr('rel') + 'digits.png',
								 startTime: '01:12:12:00'
						 });


#59 tanch

tanch

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

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

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

Просмотр сообщенияСake (31 Май 2013 - 01:15) писал:

Прошу прощенья, допустил небольшую ошибку. Замените

$('#clockJS').countdown({
								 image: $('#assets_images_path') + 'digits.png',
								 startTime: '01:12:12:00'
						 });

на

$('#clockJS').countdown({
image: $('#assets_images_path').attr('rel') + 'digits.png',
								 startTime: '01:12:12:00'
						 });

Вау!!
Начались подвижки!
появились какие-то "011", что уже неплохо..)
теперь бы еще это все было часами с параметрами: дни, часы, минуты, секунды
Я правильно понимаю - что завод часов находится в main.js??

#60 Taisia

Taisia

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

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

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

у вас все появилось и все работает только таймер не помещается в ширину блока в котором он размещен поэтому обрезается
найдите в файле main.css код

#clockJS {
height: 40px;
position: absolute;
right: 225px;
top: 660px;
width: 200px;
}



и замените его на код

#clockJS {
position: absolute;
right: -21px;
top: 660px;
width: 484px;
}

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

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

и замените ее на

   {% IF index_page %}
	<span id="clockJS"></span>
	{% ENDIF %}





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

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