jquery 倒计时上的暂停按钮

Question

我有这个jquery倒计时，我需要放一个停止按钮，当它被点击时，暂停倒计时，感谢帮助！

$('#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);
});

<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>

Answer 1

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

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

Answer 2

这里是

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

<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>

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