后端返回字符串 前端转时间格式 进行倒计时

286 阅读1分钟

如果你的字符串 "05:20:00" 是一个表示时间的字符串,可以使用JavaScript中的Date对象来将其转换为时间。

1.创建一个Date对象并将时间字符串传递给它
const timeString = "05:20:00";
const date = new Date(`1970-01-01T${timeString}Z`);
2. 在这里,我们将时间字符串拼接到一个日期字符串的末尾,并将其传递给Date构造函数。我们使用"1970-01-01T"作为日期部分的值,因为我们只关心时间部分, 然后使用Date对象的getHoursgetMinutesgetSeconds方法获取时间。
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
3.在这里,我们使用Date对象的getHoursgetMinutesgetSeconds方法来获取时间的小时、分钟和秒。
    const timeString = "05:20:00";
    const date = new Date(`1970-01-01T${timeString}Z`);

    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    console.log(hours, minutes, seconds);
    // 这将输出:`5 20 0`,即时间的小时、分钟和秒。
4.然后使用 JavaScript 中的 setInterval 函数来实现倒计时功能
    const timeString = "05:20:00";
    const date = new Date(`1970-01-01T${timeString}Z`);
    const endTime = date.getTime();
    // 在这里,我们使用了上面的代码将时间字符串转换为时间,并使用 `getTime` 方法将时间转换为时间戳。
5. 创建倒计时函数,该函数每秒钟执行一次,并计算当前时间与结束时间之间的差距
    function countdown() {
      const now = Date.now();
      const timeLeft = endTime - now;

      // 计算剩余的小时、分钟和秒
      const hours = Math.floor(timeLeft / (1000 * 60 * 60));
      const minutes = Math.floor((timeLeft / (1000 * 60)) % 60);
      const seconds = Math.floor((timeLeft / 1000) % 60);
  
      // 显示倒计时
      console.log(`${hours}:${minutes}:${seconds}`);

      // 如果时间到了,则清除倒计时
      if (timeLeft <= 0) {
            clearInterval(timer);
          }
    }
    // 在这里,我们首先获取当前时间戳,并计算当前时间与结束时间之间的差距。然后,我们计算剩余的小时、分钟和秒,并将它们显示在控制台中。如果时间到了,则清除计时器。

6. 启动计时器并执行倒计时函数
    const timer = setInterval(countdown, 1000);
    // 在这里,我们使用 `setInterval` 函数来启动计时器,并每秒钟执行一次 `countdown` 函数
完整代码如下:
const timeString = "05:20:00";
const date = new Date(`1970-01-01T${timeString}Z`);
const endTime = date.getTime();

function countdown() {
  const now = Date.now();
  const timeLeft = endTime - now;

  // 计算剩余的小时、分钟和秒
  const hours = Math.floor(timeLeft / (1000 * 60 * 60));
  const minutes = Math.floor((timeLeft / (1000 * 60)) % 60);
  const seconds = Math.floor((timeLeft / 1000) % 60);
  
  // 显示倒计时
  console.log(`${hours}:${minutes}:${seconds}`);

  // 如果时间到了,则清除倒计时
  if (timeLeft <= 0) {
    clearInterval(timer);
  }
}

const timer = setInterval(countdown, 1000);
// 这将输出倒计时,直到时间到达00:00:00为止。倒计时将不会出现负数,因为在 `countdown` 函数中,我们使用 `if` 语句来检查时间是否到达,并在时间到达后清除计时器。