Главная
Web-дизайн
Появление блока, окна, текста с задержкой

Появление блока, окна, текста с задержкой

Появление с задержкой

Доброго времени суток. 🙂

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

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

Задача была решена с помощью одного простенького javascript. Его суть заключается в том, что задается таймер с определенным отрезком времени, по истечении которого невидимый элемент приобретает свойства видимого и появляется на экране у пользователя.



ѕример

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

<script type="text/javascript">
window.onload = function () {
    var i = 5;
    var timer = setInterval(function () {
        i--;
        document.getElementById('timer').innerHTML = 'Осталось секунд: ' + i;
        if (i == 0) {
            document.getElementById('example').style.display = 'block';
            document.getElementById('timer').style.display = 'none';
            clearInterval(timer);
        }
    }, 1000)
}
</script>

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

В шестой строке - то, что будет выводится на экране пока идет отсчет. В данном примере, посетитель увидит следующий текст + обратный отсчет

Осталось секунд: 5

Ниже указаны параметры для блоков, когда отсчет кончится. Строка с отсчетом исчезнет, она будет выводится в блоке с id timer, а на ее месте появится блок с Вашим содержимым. id блока с содержимым example.

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

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

<div id="timer"></div>
<div id="example" style=" display: none; ">
Содержимое скрытого блока, например ссылка на стачивание или какой-то код.
</div>	

Как я писал выше, первый блок timer внутри которого появится содержимое из шестой строки скрипта + таймер.

Во втором блоке example - Любое содержимое которое вы хотите вывести по окончанию таймера, например, та же ссылка.

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

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(10 голосов, в среднем: 5 из 5)

Опубликовано 11 комментариев

  • Drooon4ik
    Комментариев: 2

    В скрипте там где "Осталось секунд" мне надо разместить html код. Как мне его туда правильно вставить, но чтобы таймер тоже считал?

    • Виталий
      Комментариев: 269

      Я бы посоветовал для начала удалить из скрипта вообще слова «Осталось секунд», тогда у Вас останется только таймер в секундах. После в нужном месте вставить свой html код и внутрь его поместить уже блок <div id="timer"></div>, который как раз и выводит таймер, а рядом с ним и блок <div id="example" style=" display: none; "></div> внутри которого будет например ссылка.

  • Drooon4ik
    Комментариев: 2

    Точно! Я подобное делал только вкинул весь свой код в <div id="timer"></div> и при просмотре ничего не было кроме таймера. Получается скрипт заменяет все содержание на таймер 🙂 Спасибо!

  • Максим
    Комментариев: 1

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

    • Виталий
      Комментариев: 269

      Максим, если честно. Я за все время работы не то что не сталкивался с такой задачей, я даже не слышал о таком. Чтобы обычные скрипты реагировали на активность окна. Боюсь я Вам ничем не помогу.

  • Володимир
    Комментариев: 1

    у меня такой вопрос допустим в том блоке которий покажется я вставлю ссилку и мне нужно если на ссилку нажали то і изменит к примеру с 5 на 10. как ето сделать?

    • Виталий
      Комментариев: 269

      Я не совсем пойму что Вы хотите. Сделать блок с задержкой, чтобы по избежании задержки, при нажатии была еще больше задержка??? Прикрутите к ссылке второй скрипт с значением 10.

  • Дмитрий
    Комментариев: 2

    Здравия. А как сделать чтобы текст-ссылка появлялась внизу страницы (в данном случае у меня под видео, которое нужно просмотреть) Я думаю нужно сделать невидимый таймер?

    • Виталий
      Комментариев: 269

      В чем проблема? Разместите блок который появится под видео и все.

      • Дмитрий
        Комментариев: 2

        Благодарю. В принципе получилось.
        Откуда докуда нужно удалить, чтоб не высвечивалось "Осталось секунд" ?

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

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий