BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)

BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)攻略

BOM（Browser Object Model）提供了一些和浏览器本身相关的对象，在前端开发中常用的就是定时器。定时器提供了一种方式来在指定时间间隔内调用函数。

setInterval() 和 setTimeout()

在定时器应用中，最常使用的是 setInterval() 和 setTimeout() 这两个方法。

setInterval() 方法会不断调用指定的函数，直到 clearInterval() 被调用或者窗口被关闭。

setTimeout() 方法会在指定的时间间隔后调用一次函数，只执行一次。

这两个定时器都需要传入两个参数：一个是要执行的函数，另一个是时间间隔（毫秒数）。

时钟

我们可以利用 setInterval() 来实现一个简单的时钟。

首先，在 HTML 页面中设定一个显示时间的元素：

<p id="clock"></p>

然后，在 JavaScript 中，用 setInterval() 定时执行一个函数，更新 p 元素中的当前时间：

function updateTime() {
  // 创建当前时间的Date对象
  var now = new Date();

  // 获取时分秒
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();

  // 格式化为两位数
  if (hour < 10) {
    hour = '0' + hour;
  }
  if (minute < 10) {
    minute = '0' + minute;
  }
  if (second < 10) {
    second = '0' + second;
  }

  // 在 p 元素中显示时间
  document.getElementById('clock').innerHTML = hour + ':' + minute + ':' + second;
}

// 每秒钟执行 updateTime() 函数
setInterval(updateTime, 1000);

倒计时

我们可以用 setInterval() 来实现一个倒计时功能，例如在网上购物时，商品页面上常见的 “距离结束还剩…” 的倒计时。

首先，在 HTML 页面中设定一个显示时间的元素：

<p id="countdown"></p>

然后，在 JavaScript 中，用 setInterval() 定时执行一个函数，控制倒计时的时间：

// 设置倒计时时间
var endTime = new Date(2022, 2, 14, 8, 0, 0);

function updateCountdown() {
  // 获取当前时间
  var now = new Date();

  // 计算剩余时间
  var leftTime = endTime.getTime() - now.getTime();
  if (leftTime < 0) {
    leftTime = 0;
  }

  // 计算剩余小时、分钟、秒数
  var leftHour = Math.floor(leftTime / (1000 * 60 * 60));
  var leftMinute = Math.floor(leftTime / (1000 * 60)) % 60;
  var leftSecond = Math.floor(leftTime / 1000) % 60;

  // 在 p 元素中显示倒计时
  document.getElementById('countdown').innerHTML = '距离结束还剩 ' + leftHour + ' 小时 ' + leftMinute + ' 分 ' + leftSecond + ' 秒';
}

// 每秒钟执行 updateCountdown() 函数
setInterval(updateCountdown, 1000);

秒表

我们可以利用 setInterval() 实现一个简单的秒表功能。

首先，在 HTML 页面中设定两个按钮 Start 和 Stop：

<button id="start">Start</button>
<button id="stop">Stop</button>
<p id="stopwatch">00:00.00</p>

然后，在 JavaScript 中，绑定 Start 和 Stop 按钮的点击事件，并用 setInterval() 定时更新秒表时间：

// 准备计算用的变量
var startTime = 0;
var elapsedTime = 0;
var intervalId = null;

function updateTime() {
  // 更新计时时间
  var now = new Date().getTime();
  elapsedTime = now - startTime;

  // 格式化为分和秒
  var minutes = Math.floor(elapsedTime / 60000);
  var seconds = Math.floor((elapsedTime - minutes * 60000) / 1000);
  var milliseconds = Math.floor((elapsedTime - minutes * 60000 - seconds * 1000) / 10);
  if (minutes < 10) {
    minutes = '0' + minutes;
  }
  if (seconds < 10) {
    seconds = '0' + seconds;
  }
  if (milliseconds < 10) {
    milliseconds = '0' + milliseconds;
  }

  // 在 p 元素中显示时间
  document.getElementById('stopwatch').innerHTML = minutes + ':' + seconds + '.' + milliseconds;
}

// 绑定 Start 按钮的点击事件
document.getElementById('start').addEventListener('click', function() {
  // 开始计时
  startTime = new Date().getTime();

  // 每10毫秒更新一次时间
  intervalId = setInterval(updateTime, 10);
});

// 绑定 Stop 按钮的点击事件
document.getElementById('stop').addEventListener('click', function() {
  // 停止计时
  clearInterval(intervalId);
});

闹钟

我们可以用 setTimeout() 来实现一个简单的闹钟功能。

首先，在 HTML 页面中设定一个显示时间的元素和一个设置闹钟时间的输入框：

<input type="text" id="alarmTime" />
<button id="setAlarm">Set Alarm</button>
<p id="alarmMessage"></p>

然后，在 JavaScript 中，绑定 Set Alarm 按钮的点击事件，并用 setTimeout() 来在设定时间后触发闹钟事件：

// 绑定 Set Alarm 按钮的点击事件
document.getElementById('setAlarm').addEventListener('click', function() {
  // 获取设定时间
  var alarmTime = document.getElementById('alarmTime').value;

  // 解析时间，并计算需要等待的毫秒数
  var waitTime = new Date(alarmTime).getTime() - new Date().getTime();

  // 设置定时器，在设定时间后触发闹钟事件
  setTimeout(function() {
    document.getElementById('alarmMessage').innerHTML = 'Time\'s up!';
    // 播放声音或者其他提醒
  }, waitTime);
});

这个例子只是简单地在页面上显示了 “Time's up!” 的文字，实际应用中我们需要进行更多的操作，例如播放声音或者其他的提醒。