Question

所以我正在制作一个js倒数计时器，并使其正常工作。我还添加了暂停功能，但就我的一生而言，我似乎无法实现简历功能。这是到目前为止的代码。任何帮助将不胜感激。

我觉得我已经很接近了，但是还不完全。

// the date the timer is counting down to
var endDate = new Date("april 26, 2019 16:45:00");
// the pause variables is set to false until its clicked
var paused = false;
// declaring the time left variable
var time_left;
// new date(); gets the time now
var current_time = new Date();
// declaring the remaining_time variable
var time_remaining;





//setting the timer variable, this loops every second and calls the updateTimer function
timer = setInterval(updateTimer, 1000);

function updateTimer() {
    //declaring current_time inside update
    current_time = new Date();
    //setting current_time = endDate - currentTime
    time_remaining = (endDate - current_time);

    //if the time has more than 0 seconds remaining left do this
    if (time_remaining >= 0) {
        //caluclate the remaining days/ hours/ mins/ secs
        let days = Math.floor(time_remaining / (1000 * 60 * 60 * 24));
        let hours = Math.floor((time_remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let mins = Math.floor((time_remaining % (1000 * 60 * 60)) / (1000 * 60));
        let secs = Math.floor((time_remaining % (1000 * 60)) / 1000);

        //links to the class in the html and add whichever remaining time to the classes
        //slice -2 takes off the last 2 characters of the time remaining
        document.getElementById("timer-days").innerHTML = days +
            "<span class='label'>DAY(S)</span>";

        document.getElementById("timer-hours").innerHTML= ("0" + hours).slice(-2) +
            "<span class='label'>HR(S)</span>";

        document.getElementById("timer-mins").innerHTML= ("0" + mins).slice(-2) +
            "<span class='label'>MIN(S)</span>";

        document.getElementById("timer-secs").innerHTML= ("0" + secs).slice(-2) +
            "<span class='label'>SEC(S)</span>";
    }
    //else theres nothing left on the timer so change the timer to this text
    else {
        document.getElementById("timer").innerHTML = "The countdown is over!";
    }

}
//paused has already been declared as false
function pause_timer(){
    if(!paused){
//if paused is = true
        paused = true;
        //clearinterval stops the timer
        clearInterval(timer);
//
        time_left = time_remaining(endDate).total;
    }
}

function resume_timer(){
    if(paused){
        paused = false;

        // update the deadline to store the amount of time remaining
        endDate = new Date(Date.parse(new Date()) + time_left);

        // start the clock

    }
}
document.getElementById('pause').onclick = pause_timer;
document.getElementById('resume').onclick = resume_timer;

Answer 1

您不应在current_time内设置updateTimer()，因为它将被声明为new Date()，而不仅仅是增加剩余时间。暂停时，保存new Date时要节省时间，并将其用作current_time，因为我们要在时间停止的地方继续。

// the date the timer is counting down to
var endDate = new Date("Sept 26, 2019 00:00:00");
// the pause variables is set to false until its clicked
var paused = false;
// declaring the time left variable
var time_left;
// new date(); gets the time now
var current_time = new Date();
// declaring the remaining_time variable
var time_remaining;

//setting the timer variable, this loops every second and calls the updateTimer function
timer = setInterval(updateTimer, 1000);

function updateTimer() {

     //setting current_time = endDate - currentTime
     time_remaining = (endDate - current_time);

     // add 1 second to the current_time
     current_time.setSeconds( current_time.getSeconds() + 1 );

    //if the time has more than 0 seconds remaining left do this
    if (time_remaining >= 0) {
      console.log('ticking ..');
        //caluclate the remaining days/ hours/ mins/ secs
        let days = Math.floor(time_remaining / (1000 * 60 * 60 * 24));
        let hours = Math.floor((time_remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let mins = Math.floor((time_remaining % (1000 * 60 * 60)) / (1000 * 60));
        let secs = Math.floor((time_remaining % (1000 * 60)) / 1000);

        //links to the class in the html and add whichever remaining time to the classes
        //slice -2 takes off the last 2 characters of the time remaining
        document.getElementById("timer-days").innerHTML = days +
            "<span class='label'>DAY(S)</span>";

        document.getElementById("timer-hours").innerHTML= ("0" + hours).slice(-2) +
            "<span class='label'>HR(S)</span>";

        document.getElementById("timer-mins").innerHTML= ("0" + mins).slice(-2) +
            "<span class='label'>MIN(S)</span>";

        document.getElementById("timer-secs").innerHTML= ("0" + secs).slice(-2) +
            "<span class='label'>SEC(S)</span>";
    }
    //else theres nothing left on the timer so change the timer to this text
    else {
        document.getElementById("timer").innerHTML = "The countdown is over!";
    }

}
//paused has already been declared as false
function pause_timer(){
        //clearinterval stops the timer
        clearInterval(timer);

        // set the current_time to now()
        current_time = new Date();       
}

function resume_timer(){ 
        timer = setInterval(updateTimer, 1000);
}


document.getElementById('pause').onclick = pause_timer;
document.getElementById('resume').onclick = resume_timer;

Javascript倒数计时器-添加暂停/恢复功能

1 个答案: