Как сделать, чтобы по истечении времени не нажималась кнопка?

Question

[EVG82]

Есть кнопка скачать на сайте. Перед ней идет таймер и текст "Скачивание будет еще доступно " 30 секунд, 25 секунд.
На убывание. Пока таймер идет кнопка скачать активна. Переливается светом, может даже мигает... в общем привлекает внимание.

Таймер закончился. Кнопка стала черной или серой и не кликабельной, но под ней появился текст, мол, чувак обнови страницу чтобы таймер пошел заново.

Вот скорее всего это js делается
Подскажите примерный код реализации

Comments

[EVG82]

Вот так могу?

<button type="button" id="button">Button</button>
<div class="message" style="display:none;">Чувак, обнови страницу</div>
<script>
setTimeout(function() {
   $('button').attr('disabled');
   $('.message').fadeIn();
}, 30000);
</script>

А перед кнопкой другой скрипит отсчета надо поставить?

Вот такой есть. Просто убрать перенаправление. Или все не так?

<p><span class="time-left" id="time-left"></span></p>

<style>
#time-left
{font-size: 40px}
</style>
<script>
var delay = 1370000,
    output = document.querySelector('.time-left'),
    timer = setInterval(function() {
        output.textContent = --delay;
        if (!delay) {
            clearInterval(timer);
            window.location.href = "https:///";
        }
    }, 1000);
output.textContent = delay;</script>

Answer 1

[Владислав Черненко]

setTimeout(function() {
   $('button').attr('disabled');
   $('.message').fadeIn();
}, 30000);

<div class="message">Чувак, обнови страницу</div>

.message{display:none;}

Comments

[Павел Корнилов]

setTimeout(function() {
   $('button').prop('disabled', 'disabled');
   $('.message').fadeIn();
}, 30000);