Javascript 停止计时器后重新启动计时器_Javascript_Html_Timer_Setinterval

Javascript 停止计时器后重新启动计时器

javascript html timer

Javascript 停止计时器后重新启动计时器,javascript,html,timer,setinterval,Javascript,Html,Timer,Setinterval,问题：当我在停止计时器后单击“开始”按钮时，似乎无法让计时器恢复所需结果：对于任何给定的计时器，当我单击开始按钮时，在单击停止按钮后，我希望时间恢复到停止的位置我想，当点击开始按钮时，它会在被清除后再次调用setInterval函数，然而，我在解决这个问题时遇到了问题每个函数中的stop事件与intervalID变量的作用域相同，后者保存setInterval函数本身。这就是停止按钮工作的原因。调用计时器函数（SetPomOro、setLongBreak、setShortBreak）可将其

问题：当我在停止计时器后单击“开始”按钮时，似乎无法让计时器恢复

所需结果：对于任何给定的计时器，当我单击开始按钮时，在单击停止按钮后，我希望时间恢复到停止的位置

我想，当点击开始按钮时，它会在被清除后再次调用setInterval函数，然而，我在解决这个问题时遇到了问题

每个函数中的stop事件与intervalID变量的作用域相同，后者保存setInterval函数本身。这就是停止按钮工作的原因。调用计时器函数（SetPomOro、setLongBreak、setShortBreak）可将其计时器重置为原始状态。我似乎无法理解当计时器停止时如何从计时器的时间恢复

JSBIN:

//  Problem: Pomodor timer does not have functionality
//  Solution: Add functionality to the pomodor timer.
//      IF a break timer is running WHILE another is clicked, stop running timer, start clicked timer.
//      Reset current interval time on reset button.
//      If break buttons are clicked more than once, reset the time.
window.onload = function() {

    var pomodoro = document.querySelector('#set-time'),
        longBreak = document.querySelector('#long-brk'),
        shortBreak = document.querySelector('#short-brk'),
        stopButton = document.querySelector('#stop'),
        startButton = document.querySelector('#start'),
        resetButton = document.querySelector('#reset'),
        container = document.querySelector('#container'),
        actionButtons = document.querySelector('#buttons'),
        timer = document.querySelector('#timer');

   //  Click event for break timers.    
    container.addEventListener('click', function(e) {
//      store event target
        var el = e.target;
            if (el === pomodoro) {
                setPomodoro();
            } else if (el === longBreak) {
                setLongBreak();
            } else if (el === shortBreak) {
                setShortBreak();
            }
            e.stopPropagation();
    }, false);  


//  1.1a Create a timer that counts down from 25 minutes.
    function setPomodoro() {
        var mins = 24;
        var secs = 60;
        var intervalID = setInterval(function() { //set unique interval ID for each SI func.
                timer.innerHTML = mins + ':' + secs;
                secs--;
                if (secs === 0) {
                    mins--;
                    secs = 60;
                } 
            }, 1000);
//      2.2 When stop button is clicked, timer stops
        stopButton.addEventListener('click', function() {
               clearInterval(intervalID);
        }, false);

    }

//  1.2a Create a timer that counts down from 10 minutes
    function setLongBreak() {
        var mins2 = 9;
        var secs2 = 60;
        var intervalID2 = setInterval(function() {
                timer.innerHTML = mins2 + ':' + secs2;
                secs2--;
                if (secs2 === 0) {
                    mins2--;
                    secs2 = 60;
                }
            }, 1000);
         stopButton.addEventListener('click', function(){
            clearInterval(intervalID2);
        }, false);
    }
//  1.3a Create a timer that counts down from 5 minutes.
    function setShortBreak() {
        var mins3 = 4;
        var secs3 = 60;
        var intervalID3 = setInterval(function() {
                timer.innerHTML = mins3 + ':' + secs3;
                secs3--;
                if (secs3 === 0) {
                    mins3--;
                    secs3 = 60;
                }
            }, 1000);
        stopButton.addEventListener('click', function() {
            clearInterval(intervalID3);
        }, false);
    }
};

<!DOCTYPE html>
<html>
    <head>
        <title>Pomodoro Timer</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" href="main.css">

    </head>

    <body>

    <div id="container">
        <header>
            <div id="header"><h1>Pomodoro Timer</h1></div>
        </header>
        <div class="row">
            <ul id="breaks">
                <li><input type="submit" value="Pomodoro" id="set-time"></li>
                <li><input type="submit" value="Long Break" id="long-brk"></li>
                <li><input type="submit" value="Short Break" id="short-brk"></li>
            </ul>
        </div>
        <h1 id=timer></h1>
        <div class="row">
            <ul id="buttons">
                <li><input type="submit" value="Start" id="start"></li>
                <li><input type="submit" value="Stop" id="stop"></li>
                <li><input type="submit" value="Reset" id="reset"></li>
            </ul>
        </div>
        <footer>
            <p>&copy; Laere 2016</p>
        </footer>
    </div>
    <script src="script.js"></script>
    </body>
</html>

重新创建：

//  Problem: Pomodor timer does not have functionality
//  Solution: Add functionality to the pomodor timer.
//      IF a break timer is running WHILE another is clicked, stop running timer, start clicked timer.
//      Reset current interval time on reset button.
//      If break buttons are clicked more than once, reset the time.
window.onload = function() {

    var pomodoro = document.querySelector('#set-time'),
        longBreak = document.querySelector('#long-brk'),
        shortBreak = document.querySelector('#short-brk'),
        stopButton = document.querySelector('#stop'),
        startButton = document.querySelector('#start'),
        resetButton = document.querySelector('#reset'),
        container = document.querySelector('#container'),
        actionButtons = document.querySelector('#buttons'),
        timer = document.querySelector('#timer');

   //  Click event for break timers.    
    container.addEventListener('click', function(e) {
//      store event target
        var el = e.target;
            if (el === pomodoro) {
                setPomodoro();
            } else if (el === longBreak) {
                setLongBreak();
            } else if (el === shortBreak) {
                setShortBreak();
            }
            e.stopPropagation();
    }, false);  


//  1.1a Create a timer that counts down from 25 minutes.
    function setPomodoro() {
        var mins = 24;
        var secs = 60;
        var intervalID = setInterval(function() { //set unique interval ID for each SI func.
                timer.innerHTML = mins + ':' + secs;
                secs--;
                if (secs === 0) {
                    mins--;
                    secs = 60;
                } 
            }, 1000);
//      2.2 When stop button is clicked, timer stops
        stopButton.addEventListener('click', function() {
               clearInterval(intervalID);
        }, false);

    }

//  1.2a Create a timer that counts down from 10 minutes
    function setLongBreak() {
        var mins2 = 9;
        var secs2 = 60;
        var intervalID2 = setInterval(function() {
                timer.innerHTML = mins2 + ':' + secs2;
                secs2--;
                if (secs2 === 0) {
                    mins2--;
                    secs2 = 60;
                }
            }, 1000);
         stopButton.addEventListener('click', function(){
            clearInterval(intervalID2);
        }, false);
    }
//  1.3a Create a timer that counts down from 5 minutes.
    function setShortBreak() {
        var mins3 = 4;
        var secs3 = 60;
        var intervalID3 = setInterval(function() {
                timer.innerHTML = mins3 + ':' + secs3;
                secs3--;
                if (secs3 === 0) {
                    mins3--;
                    secs3 = 60;
                }
            }, 1000);
        stopButton.addEventListener('click', function() {
            clearInterval(intervalID3);
        }, false);
    }
};

<!DOCTYPE html>
<html>
    <head>
        <title>Pomodoro Timer</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" href="main.css">

    </head>

    <body>

    <div id="container">
        <header>
            <div id="header"><h1>Pomodoro Timer</h1></div>
        </header>
        <div class="row">
            <ul id="breaks">
                <li><input type="submit" value="Pomodoro" id="set-time"></li>
                <li><input type="submit" value="Long Break" id="long-brk"></li>
                <li><input type="submit" value="Short Break" id="short-brk"></li>
            </ul>
        </div>
        <h1 id=timer></h1>
        <div class="row">
            <ul id="buttons">
                <li><input type="submit" value="Start" id="start"></li>
                <li><input type="submit" value="Stop" id="stop"></li>
                <li><input type="submit" value="Reset" id="reset"></li>
            </ul>
        </div>
        <footer>
            <p>&copy; Laere 2016</p>
        </footer>
    </div>
    <script src="script.js"></script>
    </body>
</html>

HTML:

//  Problem: Pomodor timer does not have functionality
//  Solution: Add functionality to the pomodor timer.
//      IF a break timer is running WHILE another is clicked, stop running timer, start clicked timer.
//      Reset current interval time on reset button.
//      If break buttons are clicked more than once, reset the time.
window.onload = function() {

    var pomodoro = document.querySelector('#set-time'),
        longBreak = document.querySelector('#long-brk'),
        shortBreak = document.querySelector('#short-brk'),
        stopButton = document.querySelector('#stop'),
        startButton = document.querySelector('#start'),
        resetButton = document.querySelector('#reset'),
        container = document.querySelector('#container'),
        actionButtons = document.querySelector('#buttons'),
        timer = document.querySelector('#timer');

   //  Click event for break timers.    
    container.addEventListener('click', function(e) {
//      store event target
        var el = e.target;
            if (el === pomodoro) {
                setPomodoro();
            } else if (el === longBreak) {
                setLongBreak();
            } else if (el === shortBreak) {
                setShortBreak();
            }
            e.stopPropagation();
    }, false);  


//  1.1a Create a timer that counts down from 25 minutes.
    function setPomodoro() {
        var mins = 24;
        var secs = 60;
        var intervalID = setInterval(function() { //set unique interval ID for each SI func.
                timer.innerHTML = mins + ':' + secs;
                secs--;
                if (secs === 0) {
                    mins--;
                    secs = 60;
                } 
            }, 1000);
//      2.2 When stop button is clicked, timer stops
        stopButton.addEventListener('click', function() {
               clearInterval(intervalID);
        }, false);

    }

//  1.2a Create a timer that counts down from 10 minutes
    function setLongBreak() {
        var mins2 = 9;
        var secs2 = 60;
        var intervalID2 = setInterval(function() {
                timer.innerHTML = mins2 + ':' + secs2;
                secs2--;
                if (secs2 === 0) {
                    mins2--;
                    secs2 = 60;
                }
            }, 1000);
         stopButton.addEventListener('click', function(){
            clearInterval(intervalID2);
        }, false);
    }
//  1.3a Create a timer that counts down from 5 minutes.
    function setShortBreak() {
        var mins3 = 4;
        var secs3 = 60;
        var intervalID3 = setInterval(function() {
                timer.innerHTML = mins3 + ':' + secs3;
                secs3--;
                if (secs3 === 0) {
                    mins3--;
                    secs3 = 60;
                }
            }, 1000);
        stopButton.addEventListener('click', function() {
            clearInterval(intervalID3);
        }, false);
    }
};

<!DOCTYPE html>
<html>
    <head>
        <title>Pomodoro Timer</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" href="main.css">

    </head>

    <body>

    <div id="container">
        <header>
            <div id="header"><h1>Pomodoro Timer</h1></div>
        </header>
        <div class="row">
            <ul id="breaks">
                <li><input type="submit" value="Pomodoro" id="set-time"></li>
                <li><input type="submit" value="Long Break" id="long-brk"></li>
                <li><input type="submit" value="Short Break" id="short-brk"></li>
            </ul>
        </div>
        <h1 id=timer></h1>
        <div class="row">
            <ul id="buttons">
                <li><input type="submit" value="Start" id="start"></li>
                <li><input type="submit" value="Stop" id="stop"></li>
                <li><input type="submit" value="Reset" id="reset"></li>
            </ul>
        </div>
        <footer>
            <p>&copy; Laere 2016</p>
        </footer>
    </div>
    <script src="script.js"></script>
    </body>
</html>


波莫多罗计时器
波莫多罗计时器










&抄袭；莱尔2016

当用按钮启动

设置…

功能时，您总是将时间初始化为起始值。相反，如果计时器已经在运行，则必须将暂停的时间字符串解析为分和秒，并使用这些值设置变量

mins

和

secs

。也许像这样的办法行得通

   function setPomodoro() {
        if(timer.innerHTML.length > 0){
            var t = timer.innerHTML.split(':');
            var mins = parseInt(t[0]);
            var secs = parseInt(t[1]);
        }
        else{
            var mins = 24;
            var secs = 60;
        }
        var intervalID = setInterval(function() { //set unique interval ID for each SI func.
                timer.innerHTML = mins + ':' + secs;
                secs--;
                if (secs === 0) {
                    mins--;
                    secs = 60;
                } 
            }, 1000);
//      2.2 When stop button is clicked, timer stops
        stopButton.addEventListener('click', function() {
               clearInterval(intervalID);
        }, false);

    }

谢谢你，效果很好！介意解释一下代码吗？@lare当然，它并不复杂。它只是检查计时器字符串（如11:55）的长度是否为非零。如果是这样，则不使用默认的24和60，而是在冒号处分割显示的时间，从而生成一个数组

。第一个元素（

[0]

）是分钟，第二个元素是秒。因此，当计时器通过重新设置间隔再次启动时，它将从“已保存”的时间开始。有意义，请欣赏解释！可能是您的

querySelector（'

会比

getElementById（

更好，并且会大大优于我几周前在我的项目中使用querySelector而不是getElement时使用的formerYeah。不过也感谢您的提示；）