Question

我想在已经运行了几次之后再次运行我的代码（倒计时）。

使用Javascript：

var btn1 = document.getElementById('btn1');
function timer() {
  var countdown = 1 * 60 * 1000;
  var timerId = setInterval(function() {
    countdown -= 1000;
    var min = Math.floor(countdown / (60 * 1000));
    var sec = Math.floor((countdown - (min * 60 * 1000)) / 1000);

    if (countdown <= -1) {
      //alert("30 min!");
      $(".countTime").html('<div class="countTime"><input type="button" id="btn1" value="Press me!"/></div>');
      clearInterval(timerId);
      //doSomething();
    } else {
      if(min > 0) {
        $(".countTime").html(min + " : " + sec);
      } else {
        $(".countTime").html(sec);
      }
    }

  }, 1000); //1000ms. = 1sec.
}
btn1.onclick = timer;

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countTime">
  <input type="button" id="btn1" value="Press me!"/>
</div>

它只运行一次。按下按钮并再次运行倒计时不起作用。

Answer 1

问题是;

btn1.onclick = timer;

你必须像这样绑定点击;

$(document).on("click", btn1, function(){
 timer();
});

https://jsfiddle.net/a9txuLhd/

Answer 2

更改html会删除点击处理程序，因此您需要在将html更改回按钮后再次设置它。

您可以使用$("#btn1").click(timer);

执行此操作

所以代码将成为

    ...
if (countdown <= -1) {
    //alert("30 min!");
    $(".countTime").html('<div class="countTime"><input type="button" id="btn1" value="Press me!"/></div>');
    $("#btn1").click(timer); // <-- rebinding click handler
    clearInterval(timerId);
    //doSomething();
} else {
   ...

Answer 3

在倒计时＆lt; = -1条件中添加了onclick事件。希望这可以帮助。

 <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 </script>
 <script>
 var btn1 = document.getElementById('btn1');

 function timer(){
   console.log("yo in method")
   var countdown = 1 * 6 * 1000;
   var timerId = setInterval(function(){
   countdown -= 1000;
   var min = Math.floor(countdown / (60 * 1000));
   var sec = Math.floor((countdown - (min * 60 * 1000)) / 1000);

   if (countdown <= -1) {
        //alert("30 min!");
        $(".countTime").html('<div class="countTime"><input type="button" 
        id="btn1" value="Press me!"/></div>');
        $("#btn1").click(timer);
        clearInterval(timerId);
        //doSomething();
 } 
 else {
     if(min > 0){
         $(".countTime").html(min + " : " + sec);
 }
 else {
        $(".countTime").html(sec);
 }
}

 }, 1000); //1000ms. = 1sec.
}


</script>
<div class="countTime">
<input type="button" id="btn1" value="Press me!" onClick="timer()"/>
</div>

Javascript再次执行函数（倒计时）

3 个答案: