Question

我有这个jquery倒计时，我需要设置一个停止按钮，当它被点击时，暂停倒计时，欣赏帮助！

＆＃13;

$('#startClock').click(function() {
  $('#siguiente').fadeOut();
  $('#startClock').hide();
  $('#count').fadeIn();
  var counter = 30;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
      clearInterval(counter);
      $('#count').html('<p style="font-size:18px;">EXCELENTE!</p>')
      $('#siguiente').fadeIn();
      $('#startClock').fadeIn().text('REPETIR');
    }
  }, 1000);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-icons">
  <span id="count">30</span>
  <a href="#flexiones" id="siguiente" class="ui-btn ui-icon-arrow-r ui-btn-icon-right">SIGUIENTE EJERCICIO</a>
</div>

＆＃13;

Answer 1

您需要将间隔存储在变量中并清除它：

＆＃13;

var myInterval = setInterval(function(){},1000);

clearInterval(myInterval);

＆＃13;

Answer 2

这是

＆＃13;

timer = setInterval(function(){ $("button").text(Number($("button").text())+1) }, 1000);

$("button").click(function(){
  clearInterval(timer);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Click on the button to stop the countdown!
<button>0</button>

＆＃13;

Answer 3

var counter = 30
var interval;
$('#startClock').click(function(){
  $('#siguiente').fadeOut();
  $('#startClock').hide();
  $('#count').fadeIn();

  interval = setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        clearInterval(counter);
        $('#count').html('<p style="font-size:18px;">EXCELENTE!</p>')
        $('#siguiente').fadeIn();
        $('#startClock').fadeIn().text('REPETIR');
    }
  }, 1000);
});

$("#btnStopCounter").click(function(){
   clearInterval(interval);
});

这样的东西？首先你的柜台必须是全球性的，所以你可以在暂停后再次继续。

你需要在变量中保存间隔，这样你就可以在停止计数器功能上清除它。

Answer 4

这应该可以解决问题

 $(document).ready(function(){
    var counter = 30;
    var running = false
    var timer = null;

   function setTimer(){
     running = true;
     timer = setInterval(function() {
     counter--;
        if (counter >= 0) {
           span = document.getElementById("count");
           span.innerHTML = counter;
        }
        if (counter === 0) {
           clearInterval(counter);
           $('#count').html('<p style="font-size:18px;">EXCELENTE!</p>')
           $('#siguiente').fadeIn();
           $('#startClock').fadeIn().text('REPETIR');
       }
     }, 1000);
  }


  $('#siguiente').on('click', function(){
     if(running){
       clearInterval(timer)
       running = false;
     } else {
       setTimer()
     }
   })


  $('#startClock').on('click', function(){
      setTimer();
  });
})

Answer 5

您可以使用某个全局变量来检查start或stop州

var Paused = false;
var counter = 30;
$('#startClock').click(function() {
  $('#siguiente').fadeOut();
  var text = (Paused) ? "Start":"Stop";
  $('#startClock').text(text);
  $('#count').fadeIn();
  Count();
});

function Count() {
    Paused = !Paused;
  setInterval(function() {
    if(Paused) {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
      clearInterval(counter);
      $('#count').html('<p style="font-size:18px;">EXCELENTE!</p>')
      $('#siguiente').fadeIn();
      $('#startClock').fadeIn().text('REPETIR');
    }
    }
  }, 1000);
  }

Answer 6

我无法做到，我添加了一个带有clearinterval的停止按钮，但它没有做任何事情，请查看所有代码：

<span id="count">30</span>
        <a href="" id="stop">STOP</a>
        <a href="#flexiones" id="siguiente" class="ui-btn ui-icon-arrow-r ui-btn-icon-right">SIGUIENTE EJERCICIO</a>
        </div>  
    </div>

    <div data-role="footer" data-position="fixed" class="footer" style="background: #FFDA6F;">
    <a href="#" id="startClock" class="comenzar">COMENZAR</a>
  </div>


  $('#startClock').click(function(){
  $('#siguiente').fadeOut();
  $('#startClock').hide();
  $('#count').fadeIn();
  var counter = 30;
  var interval;
  internval = setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        clearInterval(counter);
        $('#count').html('<p style="font-size:18px;">EXCELENTE!</p>')
        $('#siguiente').fadeIn();
        $('#startClock').fadeIn().text('REPETIR');
    }

  }, 1000);

});

        $("#stop").click(function(){
     clearInterval(interval);
  });

在jquery倒计时暂停按钮

6 个答案: