js怎样实现倒计时功能 js实现倒计时的3种经典方案分享-js教程-PHP中文网

js怎样实现倒计时功能 js实现倒计时的3种经典方案分享

尼克

发布： 2025-06-25 19:11:01

原创

762人浏览过

javascript实现倒计时有三种常用方案：1.使用setinterval和date对象，简单易懂但存在精度问题；2.使用requestanimationframe和date对象，精度更高但代码较复杂；3.使用第三方库如day.js，功能强大但需引入依赖。倒计时结束后可通过添加回调函数执行操作，解决服务器与客户端时间不一致的方法是从服务器获取时间并计算偏差，防止页面刷新导致倒计时重置则可借助localstorage存储结束时间。选择方案应根据具体需求权衡精度、复杂度及功能扩展性。

js怎样实现倒计时功能 js实现倒计时的3种经典方案分享

倒计时功能的核心在于计算剩余时间，并将其格式化显示出来。JavaScript提供了多种实现方式，这里分享几种比较经典且常用的方案。

解决方案

JavaScript实现倒计时主要依赖于setInterval或setTimeout函数，结合Date对象进行时间计算。以下是三种常见的实现方案：

方案一：基于setInterval和Date对象

这是最常见的实现方式，通过setInterval定时更新剩余时间，并使用Date对象进行时间计算。

function countdown(endDate, elementId) {
  const end = new Date(endDate).getTime();

  const interval = setInterval(() => {
    const now = new Date().getTime();
    const timeLeft = end - now;

    if (timeLeft <= 0) {
      clearInterval(interval);
      document.getElementById(elementId).innerHTML = "倒计时结束！";
      return;
    }

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

    const display = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
    document.getElementById(elementId).innerHTML = display;
  }, 1000);
}

// 示例用法
countdown("2024-12-31 23:59:59", "countdown");

登录后复制

这个方案的优点是简单易懂，但需要注意setInterval的精度问题，可能会存在一定的误差。特别是当页面被最小化或者浏览器标签页被隐藏时，setInterval的执行频率可能会降低，导致倒计时不准确。

方案二：基于requestAnimationFrame和Date对象

为了解决setInterval的精度问题，可以使用requestAnimationFrame来代替。requestAnimationFrame的执行频率与浏览器的刷新频率同步，可以更精确地控制倒计时的更新。

function countdownRAF(endDate, elementId) {
  const end = new Date(endDate).getTime();

  function updateCountdown() {
    const now = new Date().getTime();
    const timeLeft = end - now;

    if (timeLeft <= 0) {
      document.getElementById(elementId).innerHTML = "倒计时结束！";
      return;
    }

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

    const display = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
    document.getElementById(elementId).innerHTML = display;

    requestAnimationFrame(updateCountdown);
  }

  updateCountdown();
}

// 示例用法
countdownRAF("2024-12-31 23:59:59", "countdownRAF");

登录后复制

requestAnimationFrame的优点是精度更高，性能更好，但代码相对复杂一些。

方案三：使用第三方库

有很多第三方库提供了倒计时功能，例如Moment.js、Day.js等。使用这些库可以简化代码，提高开发效率。

// 假设使用Day.js
dayjs.extend(dayjs_plugin_duration) //需要引入duration插件

function countdownDayjs(endDate, elementId) {
  const end = dayjs(endDate);

  function updateCountdown() {
    const now = dayjs();
    const duration = dayjs.duration(end.diff(now));

    if (duration.asMilliseconds() <= 0) {
      document.getElementById(elementId).innerHTML = "倒计时结束！";
      return;
    }

    const days = duration.days();
    const hours = duration.hours();
    const minutes = duration.minutes();
    const seconds = duration.seconds();

    const display = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
    document.getElementById(elementId).innerHTML = display;

    requestAnimationFrame(updateCountdown);
  }

  updateCountdown();
}

// 示例用法
countdownDayjs("2024-12-31 23:59:59", "countdownDayjs");

登录后复制

使用第三方库的优点是代码简洁，功能强大，但需要引入额外的依赖。

如何处理倒计时结束后的操作？

倒计时结束后，通常需要执行一些操作，例如显示提示信息、跳转到其他页面、刷新当前页面等。可以在倒计时结束的判断条件中添加相应的代码。例如：

if (timeLeft <= 0) {
  clearInterval(interval); // 或者取消requestAnimationFrame
  document.getElementById(elementId).innerHTML = "倒计时结束！";
  // 添加倒计时结束后的操作
  alert("倒计时结束！");
  // window.location.href = "https://www.example.com";
  return;
}

登录后复制

如何处理服务器时间和客户端时间不一致的问题？

如果服务器时间和客户端时间不一致，会导致倒计时不准确。解决这个问题的方法是从服务器获取当前时间，并使用服务器时间作为基准进行倒计时。

从服务器获取时间： 可以使用AJAX请求从服务器获取当前时间。
使用服务器时间作为基准： 在客户端计算剩余时间时，使用服务器时间作为基准。

// 假设从服务器获取到的时间戳为 serverTime
function countdownWithServerTime(endDate, elementId, serverTime) {
  const end = new Date(endDate).getTime();
  let offset = new Date().getTime() - serverTime; // 计算客户端与服务端时间差

  const interval = setInterval(() => {
    const now = new Date().getTime() - offset; // 使用客户端时间减去时间差，模拟服务端时间
    const timeLeft = end - now;

    if (timeLeft <= 0) {
      clearInterval(interval);
      document.getElementById(elementId).innerHTML = "倒计时结束！";
      return;
    }

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

    const display = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
    document.getElementById(elementId).innerHTML = display;
  }, 1000);
}

// 示例用法
// 假设从服务器获取到的时间戳为 serverTime
let serverTime = new Date("2024-01-01 10:00:00").getTime(); // 模拟服务器时间
countdownWithServerTime("2024-12-31 23:59:59", "countdownServer", serverTime);

登录后复制

需要注意的是，即使使用了服务器时间，也可能存在一定的误差，因为网络延迟等因素会导致客户端获取到的服务器时间与实际服务器时间存在差异。

如何处理页面刷新导致倒计时重置的问题？

页面刷新会导致JavaScript代码重新执行，倒计时也会重置。解决这个问题的方法是将倒计时结束时间存储在本地存储中，并在页面加载时从本地存储中读取倒计时结束时间。

function countdownWithLocalStorage(endDate, elementId) {
  let end = localStorage.getItem('countdownEndDate');
  if (!end) {
    end = new Date(endDate).getTime();
    localStorage.setItem('countdownEndDate', end);
  } else {
    end = parseInt(end); // 从 localStorage 取出的是字符串，需要转换成数字
  }

  const interval = setInterval(() => {
    const now = new Date().getTime();
    const timeLeft = end - now;

    if (timeLeft <= 0) {
      clearInterval(interval);
      document.getElementById(elementId).innerHTML = "倒计时结束！";
      localStorage.removeItem('countdownEndDate'); // 倒计时结束后移除localStorage
      return;
    }

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

    const display = `${days}天 ${hours}小时 ${minutes}秒`;
    document.getElementById(elementId).innerHTML = display;
  }, 1000);
}

// 示例用法
countdownWithLocalStorage("2024-12-31 23:59:59", "countdownLocalStorage");

登录后复制

使用localStorage存储倒计时结束时间可以解决页面刷新导致倒计时重置的问题，但需要注意localStorage的容量限制。

总的来说，选择哪种方案取决于具体的应用场景和需求。如果对精度要求不高，可以使用setInterval；如果对精度要求较高，可以使用requestAnimationFrame；如果需要更强大的功能，可以使用第三方库。同时，还需要考虑服务器时间和客户端时间不一致的问题，以及页面刷新导致倒计时重置的问题。

以上就是js怎样实现倒计时功能 js实现倒计时的3种经典方案分享的详细内容，更多请关注php中文网其它相关文章！