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

Question

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

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

我被卡住了。。。

小提琴。

时钟网页

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

Answer 2

小

提琴

将时间间隔变量设置为全局变量，单击时清除时间间隔，并在全局结束时间中添加秒数：

var myBool = false;
var globalEndTime;
var globalEndTimeTimer;
$('#pause').click(function()
{
        //alert('in');
    if($('#pause > span').hasClass('fa-pause')) {
        $('#pause > span').addClass('fa-play').removeClass('fa-pause');
    }else{
        $('#pause > span').addClass('fa-pause').removeClass('fa-play');
    }
    myBool = !myBool;
    //alert(myBool);
    if(myBool){
        clearInterval(timeinterval);
      globalEndTimeTimer = setInterval(updateGlobalEndTime, 1000);
    }else{
        clearInterval(globalEndTimeTimer);
        initializeClock('clockdiv', globalEndTime);
      //timeinterval = setInterval(updateClock, 1000);
    }

   });