anzeigen Countdown nach klicken

Question

i Code html

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

haben Wie, wenn ich klicken Show Content Echo Countdown (12s) vor Show <div id="content">I am some content!</div>

Geben Sie mir ein Beispiel für die Arbeit. Danke

Answer 1

Edit: Beispiel aktualisierten Elemente zu zeigen, wenn der Countdown beginnt und sich verstecken, wenn der Countdown abgelaufen ist. Wenn der Benutzer auf den Link klickt, wird die countToShow-Funktion aufgerufen. Sofort wird das anfänglich versteckte "ads" -Element mit dem Befehl adsElement.style.display = '' angezeigt (wodurch der inline angegebene Stil entfernt wird). Wenn der Countdown endet (remainingSeconds === 0), blende ich das Element "ads" erneut aus und setze adsElement.style.display = 'none'.

Hier ist ein Beispiel mit der setInterval Funktion mit der Möglichkeit, die Countdown-Zeit anzugeben.

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

Ihr div (Inhalt) ist nicht ausgeblendet und wird daher bereits auf dem Bildschirm angezeigt. Zuerst ausblenden div unter Verwendung:

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

Definieren Sie die showDiv Funktion:

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

Jetzt ein onclick Ereignis zum Inhalt zeigen div hinzufügen

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

Answer 3

können Sie JavaScript window.setTimeout Funktion mit rekursivem Aufruf der gleichen Timeout-Funktion bis Zählerstand 0 erreicht;

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>