如何在用戶點擊鏈接時設置倒計時？

Question

我遇到了一個場景，我需要在用戶點擊鏈接後開始倒計時，但在此之前，數字「10」（十秒倒數）必須可見。鏈接本身也打開另一頁。倒計時它不應該在最後做任何事情，只是裝飾。我該如何解決這個問題？

<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> 

消息腳本：

<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

嘗試使用jquery功能：

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); 
} 

演示小提琴：http://jsfiddle.net/6nDYd/12/