坚持尝试恢复暂停（停止）功能 - 番茄钟

Question

首先，JSFiddle 无法正确显示我的代码结果，所以我会使用 CodePen，如果可以的话。好吧，我正在努力制作一个番茄钟，但我被困在 pause/resume 会话中。我必须能够在单击时停止执行该功能（并且它应该在屏幕上显示该特定时刻，例如 22:22），并且在再次单击时它应该恢复。我知道 eval() 是不可取的，但是有人可以帮我完成我糟糕的代码吗（我知道这很乱，但我每天都在学习 JS）？更准确地说，我已经设法 pause/stop 执行了，但我需要帮助来恢复它。这是代码：

$( document ).ready(function(){
   var toggle = true;
var a = document.getElementById("breakvalue");
  a.innerHTML = 7;
  var b = document.getElementById("sessionvalue");
  b.innerHTML = 25;
 $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = numb>" + b.innerHTML + "</h1>");
  
 $("#breakplus").on("click", function(){
$("#breakvalue").html(eval(a.innerHTML)+1);
  });
  $("#breakminus").on("click", function(){
 if (a.innerHTML>=2){
$("#breakvalue").html(eval(a.innerHTML)-1);
      }
  });
  $("#sessionplus").on("click", function(){
$("#sessionvalue").html(eval(b.innerHTML)+1);
    $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = numb>" + b.innerHTML + "</h1>");
  });
   $("#sessionminus").on("click", function(){
 if(b.innerHTML>=2){
$("#sessionvalue").html(eval(b.innerHTML)-1);
       $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = numb>" + b.innerHTML + "</h1>");
       }
   });
  
 $("#crcl").on("click", function (){
   var capture = document.getElementById("crcl");
  
   var inner = capture.innerHTML;
  
  var head = document.getElementById("numb");
   
   var inn =  head.innerHTML;
 if(toggle&&isNaN(inn)){
   inter = setInterval(function(){
    console.log(inn);
    minutes = eval(inn.slice(0,2));
 
      seconds=eval(inn.slice(3));
    console.log(minutes);
    console.log(seconds);
   
    if(seconds>=0){
    $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1>" + minutes + ":" + seconds-- + "</h1>");}
        if (seconds<0){
         seconds=59;
         minutes = eval(minutes-1);
     $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1>" + minutes + ":" + seconds-- + "</h1>");}
     if(eval(minutes)<0){
       $("#crcl").html("<h1>BREAK!!!</h1>");
        clearInterval(inter);
       
      }
    toggle=false;
  }, 1000); 
     
   }
 if(toggle&&!isNaN(inn)){
  
  var minutes = eval(b.innerHTML-1);
      var seconds=59;
   
  inter = setInterval(function(){
      
    if(seconds>=0){
    $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = numb>" + minutes + ":" + seconds-- + "</h1>");
    }
        if (seconds<0){
         seconds=59;
         minutes = eval(minutes-1);
     $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = numb>" + minutes + ":" + seconds-- + "</h1>");}
     if(eval(minutes)<0){
       $("#crcl").html("<h1>BREAK!!!</h1>");
        
       clearInterval(inter);
      }
    toggle=false;
  }, 1000);
  }
   
if (!toggle) {
     clearInterval(inter);
     console.log(toggle);
     toggle=true;
     console.log(toggle);
    $("#crcl").remove();
  $(".center-block").html("<button type=button class= circle btn btn-primary id = crcl>" + inner + "</button>");
  }
  });
  
});

h5{
  display:inline-block;
}
  p{
    font-size:30px;
}
.circle
{
width:500px;
height:500px;
border-radius:50%;
font-size:20px;
color:#fff;
line-height:500px;
text-align:center;
background:#000;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class = "container text-center">
  <div>
  <h1>Pomodoro Clock</h1>
  </div>
   
  <div class="container text-center" id = "length">
   
    <h5>BREAK LENGTH</h5>
     <h5>SESSION LENGTH</h5>
  </div>
  
    
  
       <div class="btn-group text-center">
  <button type="button" class="btn btn-primary"id = "breakplus">+</button>
         <p id = "breakvalue"></p> 
  <button type="button" class="btn btn-primary"id = "breakminus">-</button>
  
</div>
    
     <div class="btn-group text-center">
  <button type="button" class="btn btn-primary" id = "sessionplus">+</button>
         <p id = "sessionvalue"></p> 
  <button type="button" class="btn btn-primary"id = "sessionminus">-</button>
  
</div>
   
    <div class="center-block"><button type="button" class=" circle btn btn-primary" id = "crcl"></button></div>
      
  </div>
</body>

这是 link 我的 Codepen

好的，这是JSFiddle, too.

Answer 1

已解决。我的错误是：在几个地方忘记了 h1 ID，将分钟和秒放在 if 语句中，以及 - 最重要的 - 在函数中放置愚蠢的额外代码：

 $("#crcl").remove();
$(".center-block").html("<button type=button class= circle btn btn-primary id = crcl>" + inner + "</button>");

坚持尝试恢复暂停（停止）功能 - 番茄钟

Stuck on trying to resume paused (stopped) function - Pomodoro timer

javascript

jquery

setinterval