Wie wird ein Countdown festgelegt, wenn der Benutzer auf einen Link klickt?

Question

Ich bin auf ein Szenario gestoßen, wo ich einen Countdown brauche, um zu starten, nachdem der Benutzer auf einen Link klickt, obwohl die Zahl "10" (ist ein Zehn-Sekunden-Countdown) vorher sichtbar sein muss. Der Link selbst öffnet auch eine andere Seite. Der Countdown, der am Ende nichts machen soll, ist nur Dekoration. Wie ziehe ich das ab?

<div id="gatewayDimmer">&nbsp;</div> 
<div id="gatewaydiv"> 
<ul id="OfferList"> 
    <h1>Ayudanos a mantener la P&aacute;gina</h1> 
    <span id="gatewayMessage">Hicimos esta p&aacute;gina de onda. Y no se mantiene sola! Ayudanos clickeando en la publicidad.</span> <br /> 
    <br /> 
    <li><a href="http://www.wachahost.com" class="offerlink" target="blank">Cheap Web Hosting</a></li> 
    <li><a href="http://peerfly.com/x/0/1076/3696/" class="offerlink" target="blank">Free Apple Ipad</a></li> 
    <li><a href="http://www.google.com" class="offerlink" target="blank">Google</a></li> 
</ul> 
<br /> 
<br /> 
Luego de completar la oferta espera: <span id="count">10</span> segundos    <script type="text/javascript"> 

      { 

      (function countDown(){ 
       var counter = 10; 

       setInterval(function countDown() { 
       counter--; 
       if (counter >= 0) { 
        span = document.getElementById("count"); 
        span.innerHTML = counter; 
       } 
       // Display 'counter' wherever you want to display it. 
       if (counter === 0) { 
       // alert('this is where it happens'); 
        clearInterval(counter); 
       } 

       }, 1000); 

      })(); 

      } 

      </script>   para acceder a la p&aacute;gina.<br /> 
Gracias!</div> 

Nachricht Skript:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> 

    var Delay = 10; 

    function setupgateway() 
    { 
     var Left = $(window).width() /2; 
     Left = Left - $('#gatewaydiv').width()/2; 

     var Top = $(window).height() /2; 
     Top = Top - $('#gatewaydiv').height()/2; 

     $('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline'); 
     $('#gatewayDimmer').width($('html').width()); 
     $('#gatewayDimmer').height($('html').height()); 
     $('#gatewayDimmer').css('display','block'); 
    } 

    function removegateway() 
    { 
     $('#gatewaydiv').css('display', 'none'); 
     $('#gatewayDimmer').css('display','none'); 
    } 

    $(document).ready(function() 
    { 
     $('.offerlink').click(function() 
     { 
      setTimeout('removegateway()', Delay*1000); 
     }); 

     setupgateway(); 
    }); 
</script> 

Answer 1

Versuchen Jquery-Funktion:

jQuery(function($){ 
    $('#startClock').on('click', doCount); 
}); 

function doCount(){ 
    var counter = 5; 
    setInterval(function() { 
     counter--; 
     if (counter >= 0) { 
     span = document.getElementById("count"); 
     span.innerHTML = counter; 
     } 
     if (counter === 0) { 
     alert('sorry, out of time'); 
     clearInterval(counter); 
     } 
    }, 1000); 
} 

Demo Fiddle: http://jsfiddle.net/6nDYd/12/