如何创建点击事件以显示设置的间隔时间

Question

我有一个 Javascript setInterval 函数设置为像计时器一样显示。我想在单击 "next" 按钮时显示计时器上的时间，以便用户可以看到他们在某个页面上花费了多长时间。我不确定如何将 setInterval 与点击事件联系起来。这就是我的，但它不起作用。

let timerId = setInterval(function () {
        document.getElementById("seconds").innerHTML = pad(++sec % 60);
        document.getElementById("minutes").innerHTML = pad(parseInt(sec / 60, 10));
    }, 1000);
    function myFunction() {
  alert document.getElementById("timerId").innerHTML = "Time passed: " + timerId);
}

Answer 1

首先，如果将setInterval方法放在函数中会更好。之后，您可以将您的函数作为参数提供给事件侦听器。

您的代码应如下所示

let timerId;
function displayTime() {
    timerId = setInterval(() => {
        // your code

    }, 1000);
}

document.querySelector('button').addEventListener('click', displayTime)

Answer 2

这应该可以解决您的问题。

var initialTime = new Date().getTime();
var timeSpent='0:00';
var timeElement = document.getElementById("time");

timeElement.innerHTML = timeSpent;

let timerId = setInterval(function () {
        var currentTime = new Date().getTime();
        timeSpent = millisToMinutesAndSeconds(currentTime - initialTime)
        timeElement.innerHTML = timeSpent;
    }, 1000);
    
function millisToMinutesAndSeconds(millis) {
  var minutes = Math.floor(millis / 60000);
  var seconds = ((millis % 60000) / 1000).toFixed(0);
  return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
}

  function alertFn(){alert(timeSpent)}
 document.getElementById("rightButton").addEventListener('click',alertFn);

 document.getElementById("wrongButton").addEventListener('click',alertFn);

<h1 id="time"></h1>
<button id="rightButton">Right</button>
<button id="wrongButton">Wrong</button>

如何创建点击事件以显示设置的间隔时间

how to create click event to display set interval time

javascript

alert

setinterval

mouseclick-event