Question

当用户第一次单击页面时，我正在尝试启动计时器。做了大量的研究，对于我的一生，无法弄清楚。我认为我应该使用document.addEventListener，但不确定该去哪里。

let min = 0;
let sec = 0;


function myTimer() {
  if (counting) {
    timer.innerHTML = min + " minutes " + sec + " seconds";
    sec++;
    if (sec >= 60) {
      sec = 0;
      min++;
    }
  }
}


//Start the timer

let startTimer = setInterval(function() {
  myTimer();
}, 1000);

Answer 1

只需将点击监听器添加到document即可调用setInterval：

let min = 0;
let sec = 0;


function myTimer() {
  timer.innerHTML = min + " minutes " + sec + " seconds";
  sec++;
  if (sec >= 60) {
    sec = 0;
    min++;
  }
}


//Start the timer
document.addEventListener('click', () => {
  setInterval(myTimer, 1000);
}, { once: true });

<div id="timer">click somewhere</div>

Answer 2

给出一个ID为button的按钮，如下所示：

<button id="button">Click me</button>

为该按钮添加计时器启动计时器的最基本方法是从dom中检索元素（使用querySelector或getElementById），然后将命名事件监听器功能添加到dom中的元素，例如onclick：

document.querySelector('#button').onclick = function(){
  //your code to start timeer here
};

但是您也可以使用addEventListener来做到这一点：

document.querySelector('#button').addEventListener('click',function(){
  //your code to start timeer here
});

或使用事件委托，您可以向文档添加全局单击处理程序，检查目标元素是否为按钮，如果是，则可以启动计时器：

document.addEventListener('click',function(event){
  if(event.target.id==='button'){
    //your code to start timer here
  }
});

在现代javascript中，有900种方法可以给猫咪剥皮，这取决于您自己决定哪种猫最合适，有时取决于个人喜好。

如何在点击时启动计时器？

2 个答案: