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

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 行之后设置Interval。

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

});

演示