javascript - 如何设置用户点击链接时的倒计时？

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

演示 fiddle :http://jsfiddle.net/6nDYd/12/