Question

我查看了此网站上的其他类似问题，无法解决此问题。以下是我正在制作的番茄钟计划的一部分。问题是，当时钟到达00:00时，我无法使此设置间隔方法停止。

这是我的代码：

var break_minutes = 0;
var ses_minutes = 0;
var ses_minutes_sec;
var display = document.querySelector('#time');

function increment_ses (id) {
    ses_minutes = ses_minutes + 1;
    document.getElementById("ses_value").innerHTML = ses_minutes ;
    document.getElementById("timmer_circle").innerHTML = ses_minutes;
}
function decrement_ses (id) {
    if (ses_minutes > 0) {
        ses_minutes = ses_minutes - 10;
    } if (ses_minutes < 0) {
        ses_minutes = 0;
    }
    document.getElementById("ses_value").innerHTML = ses_minutes ;
    document.getElementById("timmer_circle").innerHTML = ses_minutes;
}
function runTimer () {
    var minutes = ses_minutes-1;
    var seconds = 10;
    var interval = setInterval(function () {
        seconds = seconds -1;
        if (seconds == 0) {
            minutes --;
            seconds = 10 -1;
        } 
        function str_pad_left(string,pad,length) {
            return (new Array(length+1).join(pad)+string).slice(-length);
        }
        var finalTime = str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);
        document.getElementById("timmer_circle").innerHTML= finalTime;
        if (minutes == 0) {
            if (seconds == 0) {
                return clearInterval(interval);
            }
        }
    },1000);
}

HTML

<html>
<head>
<title>Pomodoro</title>
<script src="pomodoro.js"></script>
</head>
<body>
    <style>
    .timmer_circle
    {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        font-size: 50px;
        color: #fff;
        line-height: 300px;
        text-align: center;
        background: #000;
    }
    .break_length{width:100%;}
    #decrement{float:left;width:100px;}
    #break_value{text-align: center;padding-left: 100px;}
    #increment{margin:0 auto;width:100px;}

    .session_length{width:100%; margin-top: 10px;}
    #decrement_ses{float:left;width:100px;}
    #ses_value{padding-left: 100px;}
    #increment_ses{margin:0 auto;width:100px;}
    #start_but{margin-top: 20px;}
    #pause_but{margin-top: 20px; margin-left: 2px;}
    </style>
    <table>
        <tr>
            <td>
                <div class = "timmer_circle" id ="timmer_circle" value = ""> <span id = "time">Session</span> </div>
            </td>
        </tr>
    </table>
        <div class="session_length">
            <button type="button" id = "decrement_ses" onClick = "decrement_ses(this.id);">ses/dec</button>
            <button type="button" id = "ses_value" >0</button>
            <button type="button" id = "increment_ses" onClick = "increment_ses(this.id);">ses/inc</button>
        </div>

        <div class="break_length">
            <button type="button" id = "decrement" onClick = "decrement_break(this.id);">brk/dec</button>
            <button type="button" id = "break_value" value = "" >0</button>
            <button type="button" id = "increment" onClick = "increment_break(this.id);">brk/inc</button>    
        </div>
        <button id ="start_but" onClick="runTimer();">START</button>
        <button id ="pause_but">PAUSE</button>

</body>
</html>

Answer 1

因此，您的代码存在许多问题，特别是您如何计算秒数和分钟数。当你按照你的方式点击case语句时，秒数永远不会为零，因为你在函数开始时测试为零，然后将它们重置为10-1。

我会将该检查移动到函数的开头，作为初始条件的一部分。还有其他问题，但这是回答您关于间隔的具体问题。以下代码将按预期退出：

var ses_minutes = 1;
var minutes = ses_minutes-1;
var seconds = 10;
var interval = setInterval(function () {
        seconds = seconds -1;
        if (seconds == 0) {
           if(minutes === 0){
              return clearInterval(interval);
           }
           minutes --;
           seconds = 10 - 1;
        } 
        function str_pad_left(string,pad,length) {
            return (new Array(length+1).join(pad)+string).slice(-length);
        }
        var finalTime = str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);
        document.getElementById("timmer_circle").innerHTML= finalTime;
    },1000);

/ *编辑* /

所以花几分钟思考我是如何做到这一点的，如果是我的话，我会把事情分解成一些不同的函数，我也会使用setTimeout。我还会根据经过的时间计算，而不是假设间隔或超时时间恰好在1000毫秒时发生，因为这并不总是可靠的。以下可能仍然不完美（我只是粗略测试）但更接近我的任务，如果我负责这个：

const display = document.getElementById('timer');
const countDownFrom = 15000; // time in milliseconds to count from
let startTime = new Date().getTime();

function padNumber(num){
  let str = num.toString();
  return str.length > 1 ? str : '0' + str;
}

function getDisplay(milliseconds){
   const seconds = milliseconds / 1000;
   const displayMinutes = padNumber(Math.floor(seconds / 60));
   const displaySeconds = padNumber(Math.floor(seconds % 60));
   return displayMinutes + ':' + displaySeconds;
}

function tick(){
   const currentTime = new Date().getTime();
   const elapsedTime = currentTime - startTime;

   // test to see if the timer has expired
   if(countDownFrom - elapsedTime <= 0){ 
    display.innerHTML = '00:00';
    return;
   }

   display.innerHTML = getDisplay(countDownFrom - elapsedTime);
   setTimeout(tick,1000);
}

display.innerHTML = getDisplay(countDownFrom);
setTimeout(tick, 1000);

清除间隔不在期望的点停止

1 个答案: