0
首先，JSFiddle没有正确显示我的代码的结果，所以我会使用CodePen，如果没关系。 嗯，我正在努力做一个番茄钟计时器，但我停留在暂停/恢复会话。我必须能够在点击时停止执行该功能（并且它应该在屏幕上显示该特定时刻，例如22:22），并且在另一次点击时应该恢复。我知道eval（）是不可取的，但有人可以帮我完成我糟糕的代码（我知道这是一团糟，但我每天都在学习JS）？更确切地说，我设法暂停/停止执行，但我需要恢复它的帮助。 下面是代码：卡住试图恢复暂停（停止）功能 - 番茄钟计时器
$(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>这是链接到我的Codepen
好吧，这里是JSFiddle, too.
这将不利于你的代码的功能，但CodePen和JSFiddle可以完成的整洁事情是整理缩进 - 尝试在HTML或JS视图（CTRL + A）中选择所有代码，然后使用SHIFT + TAB自动缩进。我用它只是为了清理SW上的其他帖子。使每个人都可以更轻松地阅读和协助。 –
感谢您的提示，完成！ – pilgrim011