如何在页面加载时添加一个计时器，该计时器在单击按钮时停止？

Question

我想在页面加载时开始的页面上添加一个计时器。

以毫秒为单位上升的位置。

然后当鼠标点击按钮时停止。

我将如何创建一个代码示例？

这就是我要在代码中做的所有事情。

添加一个在页面加载时启动的计时器。

以毫秒为单位上升。

然后在单击按钮时停止。

我希望能够看到数字上升。

https://jsfiddle.net/xvkwmndq/

// Counter
    var enterDate = new Date();
    function secondsSinceEnter()
    {
      return (new Date() - enterDate) / 1000;
    }

    // Usage example
    document.querySelector('button').onclick = function() {
      var sec = secondsSinceEnter();
      if (sec < 10)
          this.innerText = sec + " seconds";
      else
          this.innerText = 'You are here like for eternity';
    };

.play {
      -webkit-appearance: none;
      appearance: none;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      cursor: pointer;
      border: 9px solid blue;
      background: transparent;
      filter: drop-shadow(3px 3px 3px #000000b3);
    }

<button class="play" type="button" aria-label="Open"></button>

Answer 1

与您评论中的jsfiddle相关：

不要使用 this 访问按钮。相反，只需使用 document.querySelector:

document.querySelector('button').onclick = function() {
  var sec = secondsSinceEnter();
  if (sec < 10)
    document.querySelector('button').innerText = sec + " seconds";
  else
    document.querySelector('button').innerText = 'You are here like for eternity';
}

然后，您只需添加单击按钮的时间。此外，您应该使用 setInterval 每 0 毫秒（每 'tick'）调用一次它。这样您就不必两次编写该函数，您可以将其定义为一个单独的函数。最后去掉按钮点击的时间间隔

完整脚本：

// Interval
var interval;

// Counter
var enterDate = new Date();
function secondsSinceEnter()
{
  return (new Date() - enterDate) / 1000;
}

// Event function
function evtFct()
{
  var sec = secondsSinceEnter().toFixed(3);
  if (sec < 10)
    document.querySelector('button').innerText = sec + " seconds";
  else
    document.querySelector('button').innerText = 'You are here like for eternity';
}

// Add interval to keep the current time uptodate
interval = setInterval(evtFct, 0); // Call evtFct every tick

// Usage example
document.querySelector('button').onclick = function()
{
  evtFct();
  clearInterval(interval); // Disable interval
}

如何在页面加载时添加一个计时器，该计时器在单击按钮时停止？

How to add a timer on page load that stops when button is clicked?

javascript

button

timer

mouseevent

milliseconds