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


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


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

#1 ursuds

ursuds

    Новичок

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

Отправлено 10 Ноябрь 2011 - 10:50

Здравствуйте, хочу сделать таймер обратного отсчета времени, но никак не получается. Хочу, чтобы выглядело как на картинке, за ранее спасибо.

Прикрепленные изображения

  • Счетчик.jpg


#2 Vaccina

Vaccina

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

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

Отправлено 10 Ноябрь 2011 - 18:46

Подобный вопрос обсуждался - вы его можете прочитать тут http://forum.storela...ndpost__p__8829

#3 ursuds

ursuds

    Новичок

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

Отправлено 11 Ноябрь 2011 - 09:14

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

Прикрепленные изображения

  • 222.png


#4 Vaccina

Vaccina

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

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

Отправлено 11 Ноябрь 2011 - 15:16

По идее этот блок с обратном отсчетом нужно обвернут в новый блок с сл. стилем:
<div style="position:absolute;z-index:1;left:50px;top:50px;width:200px;">тут весь код счетчика</div>

Далее можно управлять положением данного блока через свойства left и top а так же изменить ширину через width

#5 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

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

Отправлено 18 Март 2012 - 15:16

Всем привет. Скажите пожалуйста, а как поместить Таймер в одно из этих мест?

Прикрепленные изображения

  • deadline.JPG


#6 Vaccina

Vaccina

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

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

Отправлено 19 Март 2012 - 21:19

Добавьте код в шаблон "HTML" после строки <div id="header">
<div style="position:absolute;right:20px;top:120px;">В данное место вставляете ваш код "Таймер"</div>


#7 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

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

Отправлено 01 Май 2012 - 11:00

подскажите пожалуйста, как поставить вот такой счётчик?

В архиве к этому счётчику прилагался файл: jquery.countdown.js

Пытался установить, но получился только текст "часы минуты секунды" и всё мену съехало вниз...

У кого есть опыт с установкой подобных счётчиков, отзовитесь.

Прикрепленные изображения

  • stch.JPG


#8 Vaccina

Vaccina

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

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

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

Пожалуйста, сообщите ваш адрес сайта.

#9 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

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

Отправлено 03 Май 2012 - 00:03

Просмотр сообщенияVaccina (02 Май 2012 - 21:15) писал:

Пожалуйста, сообщите ваш адрес сайта.

http://dressz.ru

Хочу поставить таймер на том месте где "гарантия и доставка"

#10 Vaccina

Vaccina

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

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

Отправлено 03 Май 2012 - 20:01

Вам необходимо обвернуть код вашего счетчика в следующий блок

<div style="position:absolute;z-index:2;left:120px;top:80px;">
 Тут код вашего счетчика
</div>

И вставить получившийся код в шаблон "HTML" после строки

<div id="header" class="container">

далее выровнять положение изменяя значения left и top

#11 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

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

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

Просмотр сообщенияVaccina (03 Май 2012 - 20:01) писал:

Вам необходимо обвернуть код вашего счетчика в следующий блок

<div style="position:absolute;z-index:2;left:120px;top:80px;">
 Тут код вашего счетчика
</div>

И вставить получившийся код в шаблон "HTML" после строки

<div id="header" class="container">

далее выровнять положение изменяя значения left и top

хм.. получилась ерунда какая-то  :(   http://dressz.ru

Вот какие инструкции были на сайте:

Разметка HTML

Разметка для Демо 1
  <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>


CSS

Стили для Демо 1:
      br { clear: both; }
      .cntSeparator {
        font-size: 54px;
        margin: 10px 7px;
        color: #000;
      }
      .desc { margin: 7px 3px; }
      .desc div {
        float: left;
        font-family: Arial;
        width: 70px;
        margin-right: 65px;
        font-size: 13px;
        font-weight: bold;
        color: #000;
      }


javascript

В шапке покдлючаем jQuery, плагин countdown и скрипт его вызова (для Демо 1):
    <script src="http://ajax.googleap.../jquery.min.js" type="text/javascript"></script>
    <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>

И ещё файл jquery.countdown.js нужно закачивать в директорию?

#12 Vaccina

Vaccina

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

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

Отправлено 06 Май 2012 - 08:39

Да, файл jquery.countdown.js необходимо закачивать и подключать.
А строка
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
ненужна.

#13 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

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

Отправлено 06 Май 2012 - 17:57

Просмотр сообщенияVaccina (06 Май 2012 - 08:39) писал:

Да, файл jquery.countdown.js необходимо закачивать и подключать.
А строка
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
ненужна.

А куда вставлять разметку ХТМЛ и javascript ?

#14 Vaccina

Vaccina

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

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

Отправлено 10 Май 2012 - 17:27

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

#15 nozzLess

nozzLess

    Продвинутый пользователь

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

Отправлено 07 Февраль 2013 - 14:37

Здравствуйте. у меня шаблон "пластик". никак не получается вставить этот таймер. полдня уже убил. =((( хочу вставить его на страницу товара, который идет по акции под фразой "Товар участвует в акции....". И еще хочу вставить его на главную. Подскажите плз!

#16 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 07 Февраль 2013 - 16:22

Просмотр сообщенияnozzLess (07 Февраль 2013 - 14:37) писал:

Здравствуйте. у меня шаблон "пластик". никак не получается вставить этот таймер. полдня уже убил. =((( хочу вставить его на страницу товара, который идет по акции под фразой "Товар участвует в акции....". И еще хочу вставить его на главную. Подскажите плз!


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

#17 nozzLess

nozzLess

    Продвинутый пользователь

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

Отправлено 08 Февраль 2013 - 13:16

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

#18 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 08 Февраль 2013 - 13:44

Просмотр сообщенияnozzLess (08 Февраль 2013 - 13:16) писал:

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

Вот инструкция с нужным Вам счетчиком

#19 nozzLess

nozzLess

    Продвинутый пользователь

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

Отправлено 08 Февраль 2013 - 17:03

Просмотр сообщенияsupport 2.0 (08 Февраль 2013 - 13:44) писал:

Вот инструкция с нужным Вам счетчиком

Это не то. Этот я ставил, все работает, но он текстовый. А я хочу именно этот с черным циферблатом и анимированными белыми цифрами.

#20 Vaccina

Vaccina

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

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

Отправлено 09 Февраль 2013 - 00:40

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




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

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