Question

我已经找到了很多方法来暂停和恢复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();
}

Answer 1

Theres a solution here我觉得很酷。让间隔继续进行，仅在暂停变量设置为false时更新显示。

你可以在setInterval中运行的函数顶部添加一个if语句，该函数检查计时器是否暂停，如果不是，那么如果它没有做任何事情则继续正常。

Answer 2

变量clicked未在暂停按钮的点击处理程序中定义，这会破坏您的js。除此之外，您似乎正走在正确的轨道上。

该变量应该更改为isCountingDown并在模块级别定义（顶部的其他变量），然后需要根据定时器是否正在倒计时来切换

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

至于您的第二个问题，您只需将所需的逻辑添加到#remove处理程序中，如果time变量设置为小于零，则会手动将其重置为零。这可以通过简单的条件来处理。

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

暂停jquery倒计时器按钮

2 个答案: