Ищу скрипт который активирует кнопку через 5 сек.

Статус
В этой теме нельзя размещать новые ответы.

DMax

Гуру форума
Регистрация
11 Июн 2014
Сообщения
252
Реакции
54
Здравствуйте друзья!
Может у когото есть скрипт который активирует кнопку с ссылкой через 5/10 сек, чтобы пользователь видел отсчет времени и после нажимал на кнопку.
Заранее спасибо!
 
Отключи элемент по дефолту и с помощью setTimeout через нужное время делай элемент доступным.

Для просмотра ссылки Войди или Зарегистрируйся - вот пример
 
Вот нашел уже готовый пример с похожим функционалом Для просмотра ссылки Войди или Зарегистрируйся Или тебе нужен еще какой-то красивый счетчик на кнопку?
 
  • Нравится
Реакции: DMax
Посоветуйте счетчик.
Для себя я использовал Для просмотра ссылки Войди или Зарегистрируйся, хорошо работает и можно по разному задизайнить. А вот еще нашел с уже готовыми дизайнами: Для просмотра ссылки Войди или Зарегистрируйся , Для просмотра ссылки Войди или Зарегистрируйся

И вот еще примерчик Для просмотра ссылки Войди или Зарегистрируйся
 
  • Нравится
Реакции: DMax
Вот нашел уже готовый пример с похожим функционалом Для просмотра ссылки Войди или Зарегистрируйся Или тебе нужен еще какой-то красивый счетчик на кнопку?
То что нужно, спасибо за помощь, а можно сделать так, чтобы кнопка была не подсвечена, а после истечении времени, она подсветилась, и под ней сразу появилась надпись? Очень было бы классно...

И я немного не понял, как время там выставлять нужное...
 
То что нужно, спасибо за помощь, а можно сделать так, чтобы кнопка была не подсвечена, а после истечении времени, она подсветилась, и под ней сразу появилась надпись? Очень было бы классно...
Можешь попробовать так. В HTML коде сразу показывать и кнопку(неактивную с виду), и текст счетчика:
HTML:
<a href="downloadFile.zip" id="download" class="button">Download the file...</a>
<p id="download-alert"></p>

В CSS в начальном классе .button задать стиль неактивной кнопки (логику блокирования кнопки и подставления ссылки на файл нужно дописывать отдельно). И сделать стили активной кнопки в .button.active :
Код:
.button {
    background-color: #cccccc;
    border: 1px solid #cccccc;
    color: #aaaaaa;
    font-family: Arial;
    font-size: small;
    text-decoration: none;
    padding: 3px;
}

.button.active {
    background-color: #ddcccc;
    border: 1px solid black;
    color: black;
}

Изменения в JS коде:
Код:
var downloadButton = document.getElementById("download");
var downloadAlertText = document.getElementById("download-alert");
var counter = 10;
// var newElement = document.createElement("p");
downloadAlertText.innerHTML = "You can download the file in " + counter  + " seconds.";
var id;

// downloadButton.parentNode.replaceChild(newElement, downloadButton);

id = setInterval(function() {
    counter--;
    if(counter < 0) {
        // newElement.parentNode.replaceChild(downloadButton, newElement);
        downloadButton.className += ' active';
        downloadAlertText.style.display = 'none';
        clearInterval(id);
    } else {
        downloadAlertText.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
    }
}, 1000);
 
  • Нравится
Реакции: DMax
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху