Появление объекта (кнопки) на странице через определенное (заданное) время

    6 комментариев 2691

Появление кнопки на страницеЗдравствуйте, друзья. Вы наверняка уже видели, как на странице какого-нибудь товара, через определенное время появляется кнопка заказа. Например после просмотра видео. Я тоже совсем недавно искал решение, чтобы под видео установить кнопку и чтобы она появлялась только после просмотра видео (примерно). Способ решения этой проблемы я благополучно нашел и сейчас мы с вами его разберем и рассмотрим некоторые нюансы. Посмотреть пример можно на этой странице. Кнопка появляется через 5 секунд.

Демо

Телеграм-канал serblog.ru

Вся эта конструкция работает на JavaScript. Вот такой у нее код:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="link"></div>
<script type="text/javascript">
var obj = document.getElementById('link');
var timerFIG = 50; // Время в секундах, через которое появляется кнопка
var timer = setInterval("startTimer()",1000);
function startTimer() {
if(timerFIG !== 1) {
timerFIG--;
} else {
clearInterval(timer);
obj.innerHTML = 'Код кнопки или другого объекта'; // кнопка
}}
</script>

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

Любая сумма на развитие сайта

6 комментариев
  1. Спасибо! Вставил код на страницу записи вордпресс все работает

  2. Привет. У Вас после перехода по кнопке «Демо» виден таймер обратного отсчёта после фразы «Кнопка появится через». Не подскажете какой код для этого нужен. Заранее благодарен.

  3. Попробовал почему то не получилось, может я не правильно что то сделал?

  4. Спасибо очень помогли!

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

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