tgoop.com/webdevlair/3851
Create:
Last Update:
Last Update:
Создайте кнопку, которая становится недоступной (disabled) на 5 секунд после каждого нажатия. Отображайте обратный отсчёт времени на кнопке, чтобы пользователь видел, когда её можно будет нажать снова.
Ожидаемое поведение:• При нажатии на кнопку она становится недоступной.• На кнопке отображается обратный отсчёт времени: 5... 4... 3....• Через 5 секунд кнопка снова становится активной и текст возвращается в исходное состояние.
Решение задачи
<button id="timer-button">Нажми меня</button>
#timer-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#timer-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
const button = document.getElementById('timer-button');
button.addEventListener('click', () => {
let countdown = 5;
// Деактивируем кнопку и запускаем таймер
button.disabled = true;
const interval = setInterval(() => {
button.textContent = `Ждите... ${countdown}`;
countdown--;
if (countdown < 0) {
clearInterval(interval);
button.disabled = false;
button.textContent = 'Нажми меня';
}
}, 1000);
});