Question

问题：我有三个设置不同计时器的按钮。当我在第一次点击后单击计时器按钮时，它不会重置计时器，而是继续计时器从中断处停止。

期望结果：当我点击计时器按钮（番茄钟，lng休息，shrt break）时，我希望计时器重置。 EG：番茄钟设置为24分60秒。如果我说计时器时点击相同的番茄钟按钮，23分钟，我希望它重置为原来的24分60秒。

重新创造了这种情况：

这是我的javascript和html。我还将发布一个JSBin，因为我还不知道如何编写代码片段。

JavaScript的：

//  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'),
        timer = document.querySelector('#timer'),
        seconds = 60;  //set seconds
   //  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 pomodoroMins = 24;
        var intervalID = setInterval(function() { //set unique interval ID for each SI func.
                timer.innerHTML = pomodoroMins + ':' + seconds;
                seconds--;
                if (seconds === 0) {
                    pomodoroMins--;
                    seconds = 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 longBreakMins = 9;
        var intervalID2 = setInterval(function() {
                timer.innerHTML = longBreakMins + ':' + seconds;
                seconds--;
                if (seconds === 0) {
                    longBreakMins--;
                    seconds = 60;
                }
            }, 1000);
         stopButton.addEventListener('click', function(){
            clearInterval(intervalID2);
        }, false);
    }
//  1.3a Create a timer that counts down from 5 minutes.
    function setShortBreak() {
        var shortBreakMins = 4;
        var intervalID3 = setInterval(function() {
                timer.innerHTML = shortBreakMins + ':' + seconds;
                seconds--;
                if (seconds === 0) {
                    shortBreakMins--;
                    seconds = 60;
                }
            }, 1000);
        stopButton.addEventListener('click', function() {
            clearInterval(intervalID3);
        }, false);
    }
};

HTML：

 <!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>

JSBin： http://jsbin.com/fodagejohi/1/edit?html,js,output

感谢指导。

重置三个不同间隔按钮的setInterval计时器

0 个答案: