Javascript 暂停设置间隔然后继续时出现问题_Javascript_Html

Javascript 暂停设置间隔然后继续时出现问题

javascript html

Javascript 暂停设置间隔然后继续时出现问题,javascript,html,Javascript,Html,我在建造计时器时遇到了一个小问题。一切进展顺利，但简言之，它就是这样做的：用户可以设置他/她想要学习或做任何活动的时间用户按下开始键开始按钮变为“停止”按钮计时器从用户选择的时间开始倒计时一旦计时器达到0，带有停止和按钮的时钟将变回“开始”，所有内容将重置为0:00 注意一旦用户点击开始按钮或开始按钮，如果能够通知用户，设备将振动问题我的问题是，当时钟运行时，用户按下“停止学习”按钮，时钟停止，是的，这很好，但当他/她再次按下按钮时（现在应该是“开始”按钮，因为它基本上已暂停）

我在建造计时器时遇到了一个小问题。一切进展顺利，但简言之，它就是这样做的：

用户可以设置他/她想要学习或做任何活动的时间

用户按下开始键

开始按钮变为“停止”按钮

计时器从用户选择的时间开始倒计时

一旦计时器达到0，带有停止和按钮的时钟将变回“开始”，所有内容将重置为0:00

注意

一旦用户点击开始按钮或开始按钮，如果能够通知用户，设备将振动

问题

我的问题是，当时钟运行时，用户按下“停止学习”按钮，时钟停止，是的，这很好，但当他/她再次按下按钮时（现在应该是“开始”按钮，因为它基本上已暂停），然后，时钟取给定的时间，从用户给定的时间开始计时，直到0:00才继续

我查阅了一些文章，我使用了变量，在布尔状态之间切换，并检查时钟是否正在运行

isRunning = !isRunning

我看到一些人说我应该使用：

clearInterval(name);

这不起作用，因为我不想清除时钟的状态，或者可能我做错了

代码

可在此处找到小提琴的链接：

HTML

<br/>
<div class="timer" id="startingTimer">
    <p class="title" id="state">Break</p>
    <p id="time">00:00</p><span ng-style="{'height':fillHeight, 'background':fillColor }" class="fill" style="height: 0.933333%; background: rgb(153, 204, 0);"></span>

</div>
<br/>
<div class="session" id="toggleSessionStart">
    <div class="timer control startingTimercontroller" id="startingTimercontroller">
        <p class="title controlTitle" id="StartTimer">Start Study</p>
    </div>
    <!--<div class="timer control startingPauseTimercontroller" id="startingPauseTimercontroller">
        <p class="title controlTitle" id="StartPauseTimer">Start Break</p>
    </div>--></div>
<br/>
<header>
    <div class="session">
        <div class="sessionCtrl">
            <p>session length</p>
            <input type="number" class="time" id="valueTimerSession" value="10">
        </div>
        <!--<div class="breakCtrl">
            <p>break length</p>
            <input type="number" class="time" id="valueTimerBreak" value="5"> 
       </div>--></div>
</header>

body {
    background: #333333;
    color: #fff;
}
#time {
    font-size: 90px;
    position: relative;
    top: -40px;
}
@media (max-width: 500px) {
    #time {
        font-size: 90px;
        position: relative;
        top: -80px;
    }
}
.plus {
    background-color: #333333;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 2em;
    outline: none;
}
.time {
    font-size: 2.5em;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}
.minus {
    background-color: #333333;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 2em;
    outline: none;
}
header {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    text-transform: uppercase;
    padding: 20px;
}
.session .breakCtrl, .session .sessionCtrl {
    display: inline;
    padding-left: 30px;
    padding-right: 30px;
}
.session {
    font-size: .8em;
    display: flex;
}
.timer {
    margin: 0 auto;
    text-align: center;
    width: 300px;
    height: 300px;
    font-size: 4em;
    border: 2px solid #99CC00;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 20;
    overflow: hidden;
}
.control {
    margin: 0 auto;
    text-align: center;
    width: 120px;
    height: 120px;
    font-size: 4em;
    border: 2px solid #99CC00;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 20;
    overflow: hidden;
    font-family: sans-serif;
}
.startingTimercontroller {
    background: #37B703 !important;
    border: 2px solid #fff;
}
.startingPauseTimercontroller {
    background: #B70000 !important;
    border: 2px solid #fff;
}
.title {
    margin: 45px;
    margin-bottom: -30px;
}
.controlTitle {
    font-size: 28px;
    position: relative;
    top: 25px;
    margin: 0;
}
.heading {
    text-align: center;
    font-size: 50px;
    text-transform: uppercase;
    font-family: sans-serif;
}

//event Listener
var clickStart = document.getElementById("toggleSessionStart");

//pauseing the clock
var clockRunning = false;
var clicked = false;

//getting the user value ammount to study and break for
var valueTimerSession = parseInt(document.getElementById('valueTimerSession').value);


function pomodoro(studyTime) {
    this.studyTime = studyTime;
    this.seconds = 59;
    this.timerDOM = document.getElementById("time");
    this.state = document.getElementById("state");
    this.toggleSessionStart = document.getElementById('toggleSessionStart');
}

pomodoro.prototype.startStudyTicker = function () {
    var thisStudyTicker = this;
    var seconds = this.seconds - 1;
    var DOM = this.timerDOM;
    var minutes = this.studyTime - 1;
    var loopingSeconds = seconds;
    var state = this.state;
    var toggleSessionStart = this.toggleSessionStart;

    if (clicked && clockRunning) {
        console.log('We are runnung');
        window.ticker = setInterval(function () {
            //save the minutes to global variable
            window.minSaved = minutes;
            window.secSaved = loopingSeconds;

            console.log("The time saved is " + window.minSaved + ":" + window.secSaved);

            console.log(minutes + ":" + loopingSeconds);
            var tick = loopingSeconds--;
            if (loopingSeconds >= 0) {

                tick;
                DOM.innerHTML = minutes.toString() + ":" + (loopingSeconds < 10 ? '0' + loopingSeconds.toString() : loopingSeconds.toString());

            } else {
                if (minutes > 0) {
                    minutes--;
                    loopingSeconds = seconds;
                    tick;
                    DOM.innerHTML = minutes.toString() + ":" + (loopingSeconds < 10 ? '0' + loopingSeconds.toString() : loopingSeconds.toString());
                }
                if (minutes <= 0) {
                    //vibrate - Timer is Done
                    window.navigator.vibrate(300);
                    console.log('im finished');
                    clearInterval(ticker);
                }
            }
        }, 1000);
    } else {
        if (!clicked && !clockRunning) {
            clearInterval(ticker);
        }
    }

}

pomodoro.prototype.stopStudyTicker = function () {
    var thisStudyTickerStop = this;
    console.log('We are paused');

    clearInterval(ticker);
    thisStudyTickerStop.startStudyTicker();
}

//get the session title
var sessionTitle = document.getElementById('state');

//the DOM toggle
function toggleDOM(chosenTime) {
    if (clicked && clockRunning) {
        //started the session - the Title
        sessionTitle.innerHTML = "Session";
        clickStart.innerHTML =
            '<div class="timer control startingPauseTimercontroller" id="startingPauseTimercontroller"><p class="title controlTitle" id="StartTimer">Stop Study</p></div>';

        //vibrate
        window.navigator.vibrate(300);

        //prototype execution
        var startStudy = new pomodoro(chosenTime);
        startStudy.startStudyTicker();
    } else {
        sessionTitle.innerHTML = "Break";
        clickStart.innerHTML =
            '<div class="timer control startingTimercontroller" id="startingTimercontroller"><p class="title controlTitle" id="StartTimer">Start Study</p></div>';

        //vibrate
        window.navigator.vibrate([100, 100, 100]);

        //prototype execution
        var stopStudy = new pomodoro();
        stopStudy.stopStudyTicker();
    }
}

clickStart.addEventListener('click', function () {
    //user clicked and the clock starts
    clicked = !clicked;
    clockRunning = !clockRunning;

    //valueTimerBreak = parseInt(document.getElementById('valueTimerBreak').value);
    valueTimerSession = parseInt(document.getElementById('valueTimerSession').value);

    //the Toggle
    toggleDOM(valueTimerSession);

});

//事件侦听器
var clickStart=document.getElementById（“toggleSessionStart”）；
//暂停时钟
var clockRunning=false；
var=false；
//获取要学习和中断的用户值amount
var valueTimerSession=parseInt（document.getElementById（'valueTimerSession'）.value）；
函数pomodoro（studyTime）{
this.studyTime=studyTime；
这个秒=59；
this.timerDOM=document.getElementById（“时间”）；
this.state=document.getElementById（“state”）；
this.toggleSessionStart=document.getElementById（'toggleSessionStart'）；
}
pomodoro.prototype.startstudyicker=函数（）{
var thistudyticker=this；
var seconds=this.seconds-1；
var DOM=this.timerDOM；
var minutes=this.studyTime-1；
var loopingSeconds=秒；
var state=this.state；
var toggleSessionStart=this.toggleSessionStart；
如果（单击并计时运行）{
log（“我们正在运行”）；
window.ticker=setInterval（函数（）{
//将分钟数保存到全局变量
window.minSaved=分钟；
window.secSaved=循环秒；
console.log（“节省的时间为“+window.minSaved+”：“+window.secSaved”）；
日志（分钟+：“+循环秒）；
var tick=循环秒--；
如果（循环秒>=0）{
打上钩
DOM.innerHTML=minutes.toString（）+“：”+（loopingSeconds<10？'0'+loopingSeconds.toString（）：loopingSeconds.toString（））；
}否则{
如果（分钟>0）{
分钟--；
循环秒=秒；
打上钩
DOM.innerHTML=minutes.toString（）+“：”+（loopingSeconds<10？'0'+loopingSeconds.toString（）：loopingSeconds.toString（））；
}
如果（分钟我没有真正理解你的代码，但我自己做了，基本上如果你点击一个按钮，秒不存储在一个变量中-存储它们，否则就继续循环。我想你会理解我的代码，用我的代码替换你的javascript
var clickStart = document.getElementById("toggleSessionStart");

var pomodoro = function() {
    this.inProgress = false;
    this.studyTime = null;
    this.timerInstance = null;
    this.timerDOM = document.getElementById("time");
    this.stateElement = document.getElementById("state");
    this.toggleSessionStart = document.getElementById('toggleSessionStart');
}

pomodoro.prototype = {
    start: function() {
        var parent = this;

        if(this.studyTime === null) this.studyTime = parseInt(document.getElementById('valueTimerSession').value, 10) * 60;

        this.timerInstance = setInterval(function() {
            parent.studyTime--;

            if(parent.studyTime < 1) parent.destroy();
            else parent.updateTime();
        }, 1000);

        return this;
    },
    pause: function() {
        clearInterval(this.timerInstance);
        this.timerInstance = null;

        return this;
    },
    destroy: function() {
        this.pause();
        this.studyTime = null;
        this.toogleState(false);
        this.timerDOM.innerHTML = '00:00';
        return this;
    },
    updateTime: function() {
        var totalSec = this.studyTime,
              minutes = Math.floor(totalSec / 60),
              seconds = totalSec % 60;

        this.timerDOM.innerHTML = (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
        return this;
    },
    toogleState: function(state) {
        this.inProgress = (typeof state !== 'undefined') ? state : !this.inProgress;

        if(this.inProgress) {
            this.stateElement.innerHTML = "Session";
            clickStart.innerHTML = '<div class="timer control startingPauseTimercontroller" id="startingPauseTimercontroller"><p class="title controlTitle" id="StartTimer">Stop Study</p></div>';
            this.start();
        }
        else {
            this.stateElement.innerHTML = "Break";
            clickStart.innerHTML = '<div class="timer control startingTimercontroller" id="startingTimercontroller"><p class="title controlTitle" id="StartTimer">Start Study</p></div>';
            this.pause();
        }

        window.navigator.vibrate(300);

        return this;
    }
};

var pomodoroInstance = new pomodoro();

clickStart.addEventListener('click', function () {
    pomodoroInstance.toogleState();
});

var clickStart=document.getElementById（“toggleSessionStart”）；
var pomotoro=函数（）{
this.inProgress=false；
this.studyTime=null；
this.timerInstance=null；
this.timerDOM=document.getElementById（“时间”）；
this.stateElement=document.getElementById（“状态”）；
this.toggleSessionStart=document.getElementById（'toggleSessionStart'）；
}
波莫多罗原型={
开始：函数（）{
var parent=此；
如果（this.studyTime===null）this.studyTime=parseInt（document.getElementById（'valueTimerSession'）。值，10）*60；
this.timerInstance=setInterval（函数（）{
parent.studyTime--；
如果（parent.studyTime<1）parent.destroy（）；
else parent.updateTime（）；
}, 1000);
归还这个；
},
暂停：函数（）{
clearInterval（这是timerInstance）；
this.timerInstance=null；
归还这个；
},
销毁：函数（）{
这个。暂停（）；
this.studyTime=null；
这个。toogleState（false）；
this.timerDOM.innerHTML='00:00'；
归还这个；
},
updateTime:function（）{
var totalSec=this.studyTime，
分钟=数学楼层（总秒/60），
秒=总秒%60；
this.timerDOM.innerHTML=（分钟<10？“0”+分钟：分钟）+“：”+（秒<10？“0”+秒：秒）；
归还这个；
},
toogleState:函数（状态）{
this.inProgress=（状态类型！=“未定义”）？状态：！this.inProgress；
如果（本程序中）{
this.stateElement.innerHTML=“会话”；
单击start.innerHTML='停止研究；
这个。start（）；
}
否则{
this.stateElement.innerHTML=“Break”；
单击Start.innerHTML='开始研究；
这个。暂停（）；
}
窗口。导航器。振动（300）；
归还这个；
}
};
var pomodoroInstance=新的pomodoro（）；
clickStart.addEventListener（'click'，函数（）{
pomotoroinstance.toogleState（）；
});

顺便说一句，有一个问题，你不能手动停止计时器，所以如果用户想设置不同的时间，他将不得不重新加载页面