暂停 jquery 倒计时按钮

Question

我已经查找了很多暂停和恢复 jQuery 倒计时的方法，但我无法让它与我这里的东西一起工作。

任何人都可以指出我需要将暂停按钮附加到 pause/resume 的正确方向吗？

我还想让计时器在点击删除 10 秒或将时间减半时不要超过 0，它超过 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();
}

Answer 1

有一个解决方案 here 我觉得很酷。让 interval 继续下去，只有当 paused 变量设置为 false 时才更新显示。

您可以在 setInterval 中运行的函数顶部添加一个 if 语句，检查计时器是否暂停，如果没有暂停则正常继续，如果暂停则不执行任何操作。

Answer 2

您的暂停按钮的点击处理程序中未定义变量 clicked，这会破坏您的 js。除此之外，看起来您的方向是正确的。

该变量应更改为 isCountingDown 之类的变量并在模块级别定义（其他变量在顶部），然后需要根据计时器是否处于活动状态来切换倒计时。

如果isCountingDown为真，点击暂停按钮应该清除间隔（暂停计时器），否则应该恢复倒计时。

至于你的第二个问题，你只需要将你想要的逻辑添加到你的 #remove 处理程序中，如果 time 变量已设置为小于零，你将手动将其重置为零.这可以用一个简单的条件来处理。

希望对您有所帮助。祝你好运！

暂停 jquery 倒计时按钮

pausing jquery countdown timer button

javascript

jquery

timer

countdown