X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-28
  • 17483 переглядів

  • Дизайн та розробка сайту

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

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

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

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

Задача была решена с помощью одного простенького 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
Проголосовало: 18, в среднем: 5 из 5
Читайте також