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

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

Демо

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