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