JavaScript 计时器在重置后没有启动

Question

计时器、start/pause 按钮和重置按钮均按预期工作。

它似乎有的唯一错误是，当我运行计时器并重置它时，它不会重新开始只有在我按下 Start/Pause 按钮 2 次后，它才会再次运行。

现场演示：http://codepen.io/Michel85/full/pjjpYY/

代码：

var timerTime; 
var time = 1500;
var currentTime;
var flag = 0;
var calculateTime

// Start your Timer
function startTimer(time) {
        document.getElementById("btnUp").disabled = true;
        document.getElementById("btnDwn").disabled = true; 
        timerTime = setInterval(function(){ 
        showTimer(); 
        return flag = 1;
    }, 1000);
}

// Reset function
function resetTimer(){
    clearInterval(timerTime);
    document.getElementById('showTime').innerHTML=(calculateTime(1500));
    document.getElementById("btnUp").disabled = false;
    document.getElementById("btnDwn").disabled = false;
    return time=1500;
}

// Pause function
function pauseTimer(){
    clearInterval(timerTime);
    currentTime = time;
    document.getElementById('showTime').innerHTML=(calculateTime(time));
    return flag = 0;
}

// Update field with timer information
function showTimer(){
    document.getElementById("showTime").innerHTML=(calculateTime(time));
    flag = 1;
    if(time < 1){
        resetTimer();
    }
    time--;
};

// Toggle function (Pause/Run)
function toggleTimmer(){
    if(flag == 1){
        pauseTimer();
    } else {
        startTimer();
    }
}
/* 
    Round-time up or down 
*/

 // Set timer Up
function timeUp(){
    time += 60;
    document.getElementById("showTime").innerHTML=(calculateTime(time));
    return time;
}

// Set timer Down
function timeDown(){
    if(time > 60){
        time-=60;
    }
    document.getElementById("showTime").innerHTML=(calculateTime(time));
    return time;
}

/*
    Break-time up down
*/
 // Set timer Up
function breakUp(){
    time += 60;
    document.getElementById("showTime").innerHTML=(calculateTime(time));
    return time;
}

// Set timer Down
function breakDown(){
    if(time > 60){
        time-=60;
    }
    document.getElementById("showTime").innerHTML=(calculateTime(time));

    return time;
}

// Calculate the Days, Hours, Minutes, seconds and present them in a digital way. 
function calculateTime(totalTime) {

    // calculate days
    var days = Math.floor(totalTime / 86400);
    totalTime = totalTime % 86400

    // calculate hours
    var hours = Math.floor(totalTime / 3600);
    totalTime = totalTime % 3600;

    // calculate minutes
    var minutes = Math.floor(totalTime / 60);
    totalTime = totalTime % 60;

    // calculate seconds
    var seconds = Math.floor(totalTime);

    function convertTime(t) {
        return ( t < 10 ? "0" : "" ) + t;
    }

    // assign the variables
    days = convertTime(days);
    hours = convertTime(hours);
    minutes = convertTime(minutes);
    seconds = convertTime(seconds);

    // Make sure the "00:" is present if empty.
    if(days !== "00"){
        var currentTimeString = days + ":" + hours + ":" + minutes + ":" + seconds;
        return currentTimeString;
    } else if (hours !== "00"){
        var currentTimeString = hours + ":" + minutes + ":" + seconds;
        return currentTimeString
    } else if(minutes !== "0:00"){
        var currentTimeString = minutes + ":" + seconds;
        return currentTimeString
    } else {
        var currentTimeString = seconds;
        return currentTimeString
    }
}

欢迎任何帮助。提前致谢。

您好，米歇尔

Answer 1

resetTimer 需要将 flag 设置为 0。如果将其设置为 1，则 toggleTimer 将调用 pauseTimer 而不是 startTimer。

顺便说一句，标志使用布尔值 (true/false) 是更好的风格。

Answer 2

只需删除 clearInterval(timerTime);在函数 resetTimer() 中；

function resetTimer() {
  //clearInterval(timerTime);
  document.getElementById('showTime').innerHTML = (calculateTime(300));
  document.getElementById("btnUp").disabled = false;
  document.getElementById("btnDwn").disabled = false;
  return time = 300;
}

JavaScript 计时器在重置后没有启动

JavaScript timer doesn't start after being reset

javascript

timer

reset

countdowntimer