X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2019-03-18
  • 8347 просмотр

    17 комментарий

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

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

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

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

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

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

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

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.