暂停jquery倒计时按钮
我已经找到了很多方法来暂停和恢复jQuery倒计时，但是对于我的生活来说，我无法让它和我这里的东西一起工作。
有人能为我指出正确的方向吗?我需要附加到暂停按钮上才能暂停/恢复？
我也想让计时器不超过0时，点击删除10秒或削减一半的时间，它超过0，只是停留在0，并播放声音。它现在变成负数，然后反弹到正数，然后继续向下数，这不是我所期望的:-/
目前拥有： jsFiddle
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="timercontainer">
<div id="timerdiv">
</div>
<div class="section">
<input id="ten" type="submit" value="start 10 seconds">
<input id="twenty" type="submit" value="start 20 seconds">
<input id="thirty" type="submit" value="start 30 seconds">
<input id="one-min" type="submit" value="start 1 min">
<input id="five-min" type="submit" value="start 5 min">
</div>
<div class="section">
<input id="add" type="submit" value="add 10 seconds">
<input id="remove" type="submit" value="remove 10 seconds"></div>
<div class="section">
<input id="half" type="submit" value="cut time in half">
<input id="double" type="submit" value="double time"><br />
<input id="pause" type="submit" value="pause">
</div>
</body>javascript
pingSound = new Audio("https://www.sounddogs.com/previews/2176/mp3/115553_SOUNDDOGS__ca.mp3");
pingSoundNear = new Audio("https://www.sounddogs.com/previews/25/mp3/234977_SOUNDDOGS__cl.mp3");
pingSound.preload = "auto";
pingSoundNear.preload = "auto";
timeout = null;
time = null;
$('#ten').on('click', function(){
startCountdown(10, 1000, end);
});
$('#twenty').on('click', function(){
startCountdown(20, 1000, end);
});
$('#thirty').on('click', function(){
startCountdown(30, 1000, end);
});
$('#one-min').on('click', function(){
startCountdown(60, 1000, end);
});
$('#five-min').on('click', function(){
startCountdown(300, 1000, end);
});
$('#pause').on('click', function(){
time = clearInterval(time);
});
$('#add').on('click', function(){
time = time+10;
startCountdown(time, 1000, end);
});
$('#remove').on('click', function(){
time = time-10;
startCountdown(time, 1000, end);
});
$('#half').on('click', function(){
time = time *.5;
roundedTime = Math.round(time);
startCountdown(roundedTime, 1000, end);
});
$('#double').on('click', function(){
time = time *2;
roundedTime = Math.round(time);
startCountdown(roundedTime, 1000, end);
});
$('#pause').click(function () {
if (clicked) {
counter = setInterval(function () {
var m = $('.min', timer),
s = $('.sec', timer);
if (seconds === 0) {
minutes--;
seconds = 59;
} else {
seconds--;
}
m.text(minutes);
s.text(leadingZero(seconds));
}, 1000);
} else {
clearInterval(counter);
}
clicked = !clicked;
});
function startCountdown(timen, pause, callback) {
time = timen;
$('#timerdiv').html(timen);
if (timen < 10) {
pingSoundNear.play();
}
if (timen > 10) {
pingSoundNear.pause();
}
if (timen <= 0) {
pingSound.play();
pingSoundNear.pause();
}
else
{
clearTimeout(timeout);
timeout = setTimeout(function(){
startCountdown(timen-1, pause, callback)
}, pause);
}
}
function end() {
/* alert(); */
pingSound.play();
}回答 2
Stack Overflow用户
发布于 2015-11-12 15:47:57
有一个解决方案，这里，我认为是相当酷。让间隔继续进行，只有当暂停的变量设置为false时才更新显示。
您可以在setInterval中运行的函数的顶部添加一个if语句，检查计时器是否暂停，如果计时器不是正常的话，如果它不做任何事情的话。
Stack Overflow用户
发布于 2015-11-12 15:51:56
在暂停按钮的单击处理程序中没有定义变量clicked，这会破坏js。除此之外，你似乎走在了正确的轨道上。
应该将该变量更改为类似于isCountingDown的内容，并在模块级别上定义(其他变量位于顶部)，然后需要根据计时器是否主动向下计数来切换该变量。
如果isCountingDown为真，单击“暂停”按钮应清除间隔(暂停计时器)，否则应恢复倒计时。
至于第二个问题，只需将所需的逻辑添加到#remove处理程序中，如果time变量设置为小于零，则手动将其重置为零。这可以用一个简单的条件来处理。
希望这能有所帮助。祝好运!
https://stackoverflow.com/questions/33675333
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号