JavaScript 计时器：使用按钮控制开始

本文将介绍如何使用 JavaScript 创建一个简单的计时器，并使用按钮来控制计时器的开始。

代码示例

HTML 代码

<button id='countup-btn'>CountUp</button>
<div id='timer'>00:00:00</div>

JavaScript 代码

var timer = null;
var totalSeconds = 0;

function startTimer() {
  timer = setInterval(function() {
    totalSeconds++;
    var hours = Math.floor(totalSeconds / 3600);
    var minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
    var seconds = totalSeconds - (hours * 3600) - (minutes * 60);
    var formattedTime = pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
    document.getElementById('timer').innerHTML = formattedTime;
  }, 1000);
}

function pad(val) {
  var valString = val + '';
  if (valString.length < 2) {
    return '0' + valString;
  } else {
    return valString;
  }
}

document.getElementById('countup-btn').addEventListener('click', function() {
  startTimer();
});

代码解释

首先，我们定义了两个变量 timer 和 totalSeconds。timer 用于存储计时器的 ID，totalSeconds 用于存储计时器已经运行的总秒数。
startTimer 函数用于启动计时器。它使用 setInterval 方法每秒钟更新一次计时器的值。在每次更新时，它会计算出小时数、分钟数和秒数，并将它们格式化为 HH:MM:SS 的字符串格式。
pad 函数用于将单个数字前面加上 0，使其成为两位数。
最后，我们监听 CountUp 按钮的点击事件，当按钮被点击时，调用 startTimer 函数启动计时器。

通过以上代码和解释，您可以轻松创建并使用一个简单的 JavaScript 计时器。