javascript - 如何暂停/播放 JavaScript 倒计时时钟

Question

我需要播放并暂停这个倒计时器，这样我就可以在暂停的特定时间恢复时钟。 初始状态为播放。

• 请注意，该按钮是空的，因为我没有导入 font-awesome 包，但它从播放切换到暂停。
• 请使用togglePause函数来创建播放/暂停间隔执行。

我被困住了...

<强> The Fiddle.

时钟 HTML

<h1>Countdown Clock</h1>
<div id="clockdiv">
    <div>
        <span class="days"></span>
        <div class="smalltext">Days</div>
    </div>
    <div>
        <span class="hours">t</span>
        <div class="smalltext">Hours</div>
    </div>
    <div>
        <span class="minutes"></span>
        <div class="smalltext">Minutes</div>
    </div>
    <div>
        <span class="seconds"></span>
        <div class="smalltext">Seconds</div>
    </div>
</div>
<div class="container">
<div id="controls">
    <h2>Pause/Continue</h2>
    <button id="pause" onclick="togglePause(1);" class="pause"><span class="fa fa-pause"></span></button>

时钟JS:

function togglePause(toPause)
{
    if($('#pause > span').hasClass('fa-pause')) {
        $('#pause > span').addClass('fa-play').removeClass('fa-pause');
    }else{
        $('#pause > span').addClass('fa-pause').removeClass('fa-play');
    }

}
    function getTimeRemaining(endtime) {
        var t = Date.parse(endtime) - Date.parse(new Date());
        var seconds = Math.floor((t / 1000) % 60);
        var minutes = Math.floor((t / 1000 / 60) % 60);
        var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
        var days = Math.floor(t / (1000 * 60 * 60 * 24));
        return {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    }

    function initializeClock(id, endtime) {
        var clock = document.getElementById(id);
        var daysSpan = clock.querySelector('.days');
        var hoursSpan = clock.querySelector('.hours');
        var minutesSpan = clock.querySelector('.minutes');
        var secondsSpan = clock.querySelector('.seconds');

        function updateClock() {
            var t = getTimeRemaining(endtime);

            daysSpan.innerHTML = t.days;
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
        }

        updateClock();
        var timeinterval = setInterval(updateClock, 1000);
    }

    function setClock(hours, minutes) {

    }


    var days = 1;
    var hours = 1;
    var minutes = 0.25;
    var seconds = 1;

    var deadline = new Date(Date.parse(new Date()) + days*60*minutes*60*seconds*1000);
    initializeClock('clockdiv', deadline);

Answer 1

尝试这个有效的播放/暂停代码:jsfiddle.net/bharatsing/1fdnho9k/7/

var timeinterval;
var t=0;

function togglePause(toPause)
{
    if($('#pause > span').hasClass('fa-pause')) {
        clearInterval(timeinterval);
        $('#pause > span').addClass('fa-play').removeClass('fa-pause');
    }else{
        var deadline=new Date(Date.parse(new Date()) + t);
        initializeClock('clockdiv', deadline);
        $('#pause > span').addClass('fa-pause').removeClass('fa-play');
    }      
}

function getTimeRemaining(endtime) {
    t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

function getTimeRemainingNew(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

function initializeClock(id, endtime) {
    var clock = document.getElementById(id);
    var daysSpan = clock.querySelector('.days');
    var hoursSpan = clock.querySelector('.hours');
    var minutesSpan = clock.querySelector('.minutes');
    var secondsSpan = clock.querySelector('.seconds');

    function updateClock() {
        var t = getTimeRemaining(endtime);

        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

        if (t.total <= 0) {
            clearInterval(timeinterval);
        }
    }

    updateClock();
    timeinterval = setInterval(updateClock, 1000);
}

function setClock(hours, minutes) {

}

$(document).ready(function(){
  var days = 1;
  var hours = 1;
  var minutes = 0.25;
  var seconds = 1;

  var deadline = new Date(Date.parse(new Date()) + days*60*minutes*60*seconds*1000);

  initializeClock('clockdiv', deadline);
});