自己封装的一个简单的倒计时功能实例

让我们来详细讲解如何封装一个简单的倒计时功能实例。

步骤1：创建函数

首先，我们需要创建一个名为 countdown 的函数，并包含两个参数：seconds 和 callback。其中，seconds 表示倒计时总秒数，callback 是一个回调函数，用于在倒计时结束时执行。

```js
function countdown(seconds, callback) {
  // Todo: 实现倒计时功能
}

步骤2：实现倒计时功能

接下来，我们需要实现倒计时的功能。实现倒计时的方法有很多种，我们这里使用了一个比较简单的方式：使用 setInterval() 函数每隔1秒更新一次倒计时。

```js
function countdown(seconds, callback) {
  let remainingSeconds = seconds;
  const timer = setInterval(() => {
    remainingSeconds--;
    if (remainingSeconds <= 0) {
      clearInterval(timer);
      callback();
    }
  }, 1000)
}

在上面的代码中，我们用 let 声明了一个变量 remainingSeconds 来保存剩余秒数，并在每个计时器的周期中使其减1。如果剩余秒数为零，我们将清除倒计时计时器并调用回调函数 callback。

步骤3：使用倒计时功能

现在，我们已经创建了一个 countdown 函数并实现了倒计时功能。我们可以使用这个函数来做很多有趣的事情，例如：

1. 实现一个定时器应用

```js
const startTimerButton = document.getElementById('start-timer-button');
const remainingTimeLabel = document.getElementById('remaining-time-label');

function startTimer(seconds) {
  countdown(seconds, () => {
    startTimerButton.disabled = false;
    remainingTimeLabel.innerText = '';
  });
}

startTimerButton.addEventListener('click', () => {
  startTimerButton.disabled = true;
  startTimer(60);
  remainingTimeLabel.innerText = '60秒';
});

在上面的代码示例中，我们选中了一个按钮和一个标签，并将它们与我们的函数结合使用，实现了一个简单的60秒倒计时定时器。

2. 实现一个砍价活动

```js
const deadline = new Date('2022-01-01');
const daysLabel = document.getElementById('days');
const hoursLabel = document.getElementById('hours');
const minutesLabel = document.getElementById('minutes');
const secondsLabel = document.getElementById('seconds');

function updateCountdown() {
  const remainingTime = deadline - new Date();
  countdown(Math.floor(remainingTime / 1000), () => {
    daysLabel.innerText = '00';
    hoursLabel.innerText = '00';
    minutesLabel.innerText = '00';
    secondsLabel.innerText = '00';
  });

  const days = Math.floor(remainingTime / 1000 / 60 / 60 / 24);
  const hours = Math.floor(remainingTime / 1000 / 60 / 60) % 24;
  const minutes = Math.floor(remainingTime / 1000 / 60) % 60;
  const seconds = Math.floor(remainingTime / 1000) % 60;

  daysLabel.innerText = days < 10 ? `0${days}` : `${days}`;
  hoursLabel.innerText = hours < 10 ? `0${hours}` : `${hours}`;
  minutesLabel.innerText = minutes < 10 ? `0${minutes}` : `${minutes}`;
  secondsLabel.innerText = seconds < 10 ? `0${seconds}` : `${seconds}`;
}

updateCountdown();
setInterval(updateCountdown, 1000);

在上面的代码示例中，我们创建了一个倒计时计时器，并使用它来实现一个砍价活动的倒计时效果。我们首先通过计算当前时间与活动结束时间之间的差来计算出剩余时间，然后使用 countdown() 函数来定时更新倒计时并显示剩余时间。最后，我们使用 setInterval() 函数每秒更新一次倒计时，并在每个计时器的周期中更新界面。

阅读剩余 49%