Показать отсчет после нажатия кнопки

Question

У меня есть код HTML

<div id="container"> 
    <a href="#container">Show Content</a> 
    <div id="content">I am some content!</div> 
</div> 

Как при нажатии Show Content эхо отсчет (12s) перед шоу <div id="content">I am some content!</div>

Дайте мне пример для работы. Спасибо

Answer 1

Edit: Пример обновлен, чтобы показать элементы, когда начинается отсчет и скрыть их, когда отсчет заканчивается. Когда пользователь нажимает на ссылку, вызывается функция countToShow. Сразу же начальный скрытый «рекламный» элемент отображается с помощью команды adsElement.style.display = '' (которая удаляет стиль display: none, указанный в строке). Когда обратный отсчет заканчивается (remainingSeconds === 0), я снова скрываю элемент 'ads', устанавливая adsElement.style.display = 'none'.

Вот пример использования функции setInterval с возможностью указания времени обратного отсчета.

function countToShow(timeInSeconds) { 
 

 
    var countdownElement = document.getElementById('countdown'); 
 
    var contentElement = document.getElementById('content'); 
 
    var adsElement = document.getElementById('ads'); 
 
    var remainingSeconds = timeInSeconds; 
 

 
    adsElement.style.display = ''; 
 
    countdownElement.innerHTML = remainingSeconds; 
 

 
    var interval = setInterval(function() { 
 

 
    countdownElement.innerHTML = --remainingSeconds; 
 

 
    if (remainingSeconds === 0) { 
 
     clearInterval(interval); 
 
     contentElement.style.display = ''; 
 
     adsElement.style.display = 'none'; 
 
    } 
 

 
    }, 1000); 
 
}

<div id="container"> 
 
    <a href="#container" onclick="countToShow(12)">Show Content</a> 
 
    <div id="ads" style="display: none"> 
 
    <div id="countdown"></div> 
 
    <div>Ads</div> 
 
    </div> 
 
    <div id="content" style="display: none">I am some content!</div> 
 
</div>

Answer 2

Ваш div (контент) не скрыт и, следовательно, будет там уже на экране. Во-первых скрыть DIV с помощью:

<div id="content" style="display: none">I am some content!</div> 

Теперь добавьте onclick событие в DIV шоу контента:

<a href="#container" onclick="showDiv()">Show Content</a> 

Определить showDiv функцию:

var showDiv = function(){ 
    setTimeout(function(){ 
     document.getElementById('container').style.display = ''; //Edit suggested by RobG 
    }, 12000); 
} 

Answer 3

Вы можете использовать JavaScript window.setTimeout функцию с рекурсивным вызовом на ту же самую функцию тайм-аута, пока счетчик не достигнет 0;

var ctr = 12; 
 

 
function showTimer(){ 
 
    window.setTimeout(function() { 
 
    if(ctr >= 0) { 
 
     document.getElementById("counter").innerHTML = ctr + 's';  
 
     showTimer(); 
 
     ctr--; 
 
    } 
 
    }, 500); 
 
}

<div id="container"> 
 
    <a href="#container" onClick="showTimer()">Show Content</a> 
 
    <div id="counter"></div> 
 
    <div id="content">I am some content!</div> 
 
</div>