用javascript实现倒计时效果

下面给出实现倒计时效果的完整攻略。

标题

用JavaScript实现倒计时效果

步骤

1. 获取倒计时目标时间

要实现倒计时效果，首先需要获取倒计时的目标时间。这里我们可以利用JavaScript内置的Date对象来获取目标时间。

const targetTime = new Date('2021-10-15T18:00:00Z').getTime(); // 获取目标时间的时间戳

2. 计算剩余时间

获取到目标时间之后，就可以计算当前时间与目标时间之间的差值，即剩余时间。这里我们可以利用JavaScript内置的Date对象来获取当前时间，然后通过减法计算出剩余时间。

const currentTime = new Date().getTime(); // 获取当前时间的时间戳
const remainingTime = targetTime - currentTime; // 计算剩余时间

3. 将剩余时间转换为时分秒格式

计算出剩余时间之后，我们需要将时间格式转换为时分秒格式。具体的实现方法是：将剩余时间除以1000（转换为秒数），然后再分别计算出剩余时间中包含的小时数、分钟数和秒数。

const remainingSeconds = Math.floor(remainingTime / 1000); // 将剩余时间转换为秒数
const remainingMinutes = Math.floor(remainingSeconds / 60); // 计算出剩余时间中包含的分钟数
const remainingHours = Math.floor(remainingMinutes / 60); // 计算出剩余时间中包含的小时数
const remainingSecondsToShow = remainingSeconds % 60; // 计算出剩余时间中显示的秒数
const remainingMinutesToShow = remainingMinutes % 60; // 计算出剩余时间中显示的分钟数
const remainingHoursToShow = remainingHours % 24; // 计算出剩余时间中显示的小时数

4. 更新页面显示

最后一步是更新页面显示。我们可以利用DOM操作，找到页面上需要显示倒计时的元素，并将计算得到的时分秒格式更新到页面上。

const remainingTimeElement = document.getElementById('remaining-time'); // 找到页面上需要显示倒计时的元素
remainingTimeElement.innerHTML = `距离目标时间还有 ${remainingHoursToShow} 小时 ${remainingMinutesToShow} 分钟 ${remainingSecondsToShow} 秒`; // 将时分秒格式更新到页面上

示例1

以下是一个简单的倒计时示例，在页面中展示了距离下一次课程开始的剩余时间。

<!-- HTML代码 -->
<div id="remaining-time">倒计时：00 时 00 分 00 秒</div>

// JavaScript代码
const targetTime = new Date('2021-10-15T18:30:00Z').getTime(); // 获取目标时间的时间戳
setInterval(() => {
  const currentTime = new Date().getTime(); // 获取当前时间的时间戳
  const remainingTime = targetTime - currentTime; // 计算剩余时间
  const remainingSeconds = Math.floor(remainingTime / 1000); // 将剩余时间转换为秒数
  const remainingMinutes = Math.floor(remainingSeconds / 60); // 计算出剩余时间中包含的分钟数
  const remainingHours = Math.floor(remainingMinutes / 60); // 计算出剩余时间中包含的小时数
  const remainingSecondsToShow = remainingSeconds % 60; // 计算出剩余时间中显示的秒数
  const remainingMinutesToShow = remainingMinutes % 60; // 计算出剩余时间中显示的分钟数
  const remainingHoursToShow = remainingHours % 24; // 计算出剩余时间中显示的小时数
  const remainingTimeElement = document.getElementById('remaining-time'); // 找到页面上需要显示倒计时的元素
  remainingTimeElement.innerHTML = `倒计时：${remainingHoursToShow < 10 ? '0' : ''}${remainingHoursToShow} 时 ${remainingMinutesToShow < 10 ? '0' : ''}${remainingMinutesToShow} 分 ${remainingSecondsToShow < 10 ? '0' : ''}${remainingSecondsToShow} 秒`; // 将时分秒格式更新到页面上
}, 1000);

示例2

以下是另一个倒计时示例，在页面中展示了距离某个特定时间点的剩余时间。

<!-- HTML代码 -->
<div id="remaining-time">距离 ${targetTime} 还有 00 时 00 分 00 秒</div>

// JavaScript代码
const targetTime = '2021-11-11T11:11:11Z'; // 设置目标时间
setInterval(() => {
  const currentTime = new Date().getTime(); // 获取当前时间的时间戳
  const remainingTime = targetTime - currentTime; // 计算剩余时间
  const remainingSeconds = Math.floor(remainingTime / 1000); // 将剩余时间转换为秒数
  const remainingMinutes = Math.floor(remainingSeconds / 60); // 计算出剩余时间中包含的分钟数
  const remainingHours = Math.floor(remainingMinutes / 60); // 计算出剩余时间中包含的小时数
  const remainingSecondsToShow = remainingSeconds % 60; // 计算出剩余时间中显示的秒数
  const remainingMinutesToShow = remainingMinutes % 60; // 计算出剩余时间中显示的分钟数
  const remainingHoursToShow = remainingHours % 24; // 计算出剩余时间中显示的小时数
  const remainingTimeElement = document.getElementById('remaining-time'); // 找到页面上需要显示倒计时的元素
  remainingTimeElement.innerHTML = `距离 ${targetTime} 还有 ${remainingHoursToShow < 10 ? '0' : ''}${remainingHoursToShow} 时 ${remainingMinutesToShow < 10 ? '0' : ''}${remainingMinutesToShow} 分 ${remainingSecondsToShow < 10 ? '0' : ''}${remainingSecondsToShow} 秒`; // 将时分秒格式更新到页面上
}, 1000);

结论

通过以上步骤，我们可以实现倒计时效果，并在页面上展示剩余时间。可以根据不同的需求，调整目标时间和页面上的显示方式，实现更加灵活的倒计时效果。