Question

我想制作一个计数器功能，并为开始时间和要显示的地方准确一个变量。

因此，如果我希望每页有多个计数器，我可以轻松管理它：

$(document).ready(function() {

            // set time and place (where to display the counter)
            function countDown(time, place){

                if(time > 0){
                    time--;    
                    setInterval(function(){countDown(time,place)}, 1000);
                } // end if

                if(time == 0)
                {
                    window.clearInterval(time);
                }
            } // end function

                     $('.click').click(function(){
                        countDown(30, '#counter');                              

                     });

}); // end DOM

   </script>
</head>


<body>
    <div class="click">clickme</div>
    <br />

    <div id="counter">30</div>

</body>

提前致谢

Answer 1

试试这个：

    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>


                var myVar;
var clickcount=0;

function countDown (time, place) {
        if (time > 0) {

        $(place).html(time);
        time--;
        myVar=setTimeout(function () { countDown(time, place); }, 1000);
  }
}

function startreset(time,place){
        clickcount++;
        if(clickcount % 2 === 0){
             clearTimeout(myVar);              
        } else {
            countDown(time,place);
        }

    }

$('.click').click(function(){
        startreset(30, '#counter');                              
        });



       </script>
    </head>




 <body>
        <div class="click" onClick="javascript:countDown(30,'#counter');">clickme</div>
        <br />

        <div id="counter">30</div>

    </body>

Answer 2

您可能遇到的问题是您多次调用setInterval。 setInterval不仅仅等待你告诉它的 x 毫秒，然后调用你的方法，继续每隔后续 x 毫秒调用你的方法。因此，当您第一次调用countDown时，会为您的函数设置一个间隔。该间隔到期，再次调用countDown。到目前为止一切正常，但现在第二次调用countDown会建立另一个 setInterval。程序将等待你的 x 毫秒从第二个setInterval调用countDown，但它会更早地从第一个setInterval调用它。

...换句话说，你不应该反复调用setInterval。你想要的是setTimeout，它等待指定的时间，然后调用指定的方法一次。

function countDown (time, place) {
  if (time > 0) {
    time--;
    $(place).html(time);
    setTimeout(function () { countDown(time, place); }, 1000);
  }
}

或者，如果你今天没有感觉递归：

function countDown (time, place) {
  var interval = setInterval(function () {
    if (time > 0) {
      time--;
      $(place).html(time);
    } else {
      window.clearInterval(interval);
    }
  }, 1000);
}

利用setInterval，但仅限ONCE。

JSFiddle提供：http://jsfiddle.net/LKvBR/

简单的JavaScript couter功能

2 个答案: