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