如何让此计时器在单击时开始而不是在页面加载时启动?

Question

我的代码位于 https://codepen.io/tb0217/pen/wYzMBe .我需要让这个时间从点击卡片开始，并停止打开多个计时器。当我每次单击新卡时都将启动计时器功能放入单击事件中时，它会添加一个计时器并快速运行。在模态函数中单击是按钮时，我还需要有关重置此计时器的帮助。有人可以解释一下吗？

var sec = 0;
function startTime(val) { return val > 9 ? val : "0" + val; }
var timer = setInterval(function() {
$("#seconds").html(startTime(++sec % 60));
$("#minutes").html(startTime(parseInt(sec / 60, 10)));
}, 1000);

Answer 1

看看这支 https://codepen.io/anon/pen/OBbRoj 笔。我做了一些更改来重置计时器，并在您单击框时启动。

if(!isStarted){
timer = setInterval(function() {
$("#seconds").html(startTime(++sec % 60));
$("#minutes").html(startTime(parseInt(sec / 60, 10)));
}, 1000);
isStarted = true;
}

function resetTimer(){
sec = 0;
$("#seconds").html(startTime(0 % 60));
$("#minutes").html(startTime(parseInt(0 / 60, 10)));
startTime();
isStarted = false;
}

您还需要添加resetTimer()作为yes按钮的onclick：

<button id="yesBtn" onclick="resetTimer();">Yes</button>

Answer 2

可以使用one(( 添加事件侦听器一次，触发后，监听器将被删除。

function addTimer(){
$(".deck").one("click",".card",()=>{
// your timer function here.
})
}

然后在窗口的加载事件和 yes 按钮的单击事件中使用它。