如何在用户点击链接时设置倒计时?

时间:2017-10-15 13:36:28

标签: javascript html onclick countdown

我遇到了一个场景,我需要在用户点击链接后开始倒计时,但在此之前必须显示数字“10”(是十秒倒计时)。链接本身也会打开另一个页面。它不应该在最后做任何事情的倒计时,只是装饰。我怎么把它关掉?

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

消息脚本:

docker:latest

1 个答案:

答案 0 :(得分: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/