Question

想要在点击按钮后显示div，然后时间开始并从10计数到0。

我的疑问是我不知道如何开始计算？

javascript：

<script>
$("button").click(function() {
$('div#test').hide().delay(200).fadeIn('slow');
});
</script>

按钮：

 <div id="test" style="display:none;">click</div>

html：

<div id="test" style="display:none;">here you are !</div>

Answer 1

您可以使用setInterval进行计数。

var count = 10;
var temp = setInterval(function(){
  if(count < 0) {
      clearInterval(temp);
   }
  // show count 
  count--;


}, 1000);

Answer 2

var count = 15;
var timerID = 0;
$("button").click(function() {
    $('div#test').hide().delay(200).fadeIn('slow', function() {
         timerID = setInterval(function() {countDown();}, 1000);  // count every 1000 ms, change this to whatever you want
    });
    $("#wait").show();  // or you could fade this in if you want. Maybe that's what you intended with #test.
});

function countDown() {
    count--;
    $("#count").text(count);
    // do whatever you want to do with your count
    if (count <= 0) {
         clearInterval(timerID);
    }
}

HTML：

<p id="wait" style="display:none">Please wait<span id="count">15</span> seconds...</p>

假设你想在fadeIn之后开始倒计时。否则，只需在fadeIn行之后拉出那一块并设置setInterval，这将在首次点击按钮时开始倒计时。

Answer 3

您可以使用setTimeout（）或setInterval（）来使其正常工作：

以下是我的表现：

    $(function() {
$("button").click(function() {
    function counter()  {  
        var i = 10;
        $("body").append('<div style="border:1px solid red;">Div Created on the Fly</div>')
        function showDIV() {

        if (i < 0)
            return 
        setTimeout(showDIV, 1000);
        $("span").text(i);
        i--;        

    }

    showDIV();
}
counter(10);
});

});

DEMO

单击并启动计时器后显示div

3 个答案: