打造高精度倒计时器：巧用 CSS 和 JavaScript 校准偏差，确保准时启航

2023-11-16 06:17:49

在快节奏的数字时代，准时至关重要。对于网站上的限时抢购或倒计时活动，精确的计时更是至关重要的成功因素。然而，传统的前端倒计时器往往面临一个隐蔽的挑战：偏移误差。当网页处于非活动状态时，倒计时器仍在继续，导致显示的时间与实际时间产生偏差。

这种看似微小的偏差在关键时刻可能演变成致 appartenant后果。试想一个秒杀活动，如果倒计时器提前几秒结束，可能会让许多急切等待的用户错失良机。相反，如果倒计时器滞后，又会让参与者产生不耐烦或困惑的情绪。

剖析偏移误差的根源

为了有效解决问题，我们必须首先了解偏移误差的根源。在大多数情况下，这种误差源于浏览器的行为。当网页处于非活动状态（例如，用户离开页面或将标签页置于后台）时，为了节省资源，许多现代 navegador 将计时器（包括倒计时器）的执行 приостановлено。这意味着，当用户重新激活网页时，倒计时器实际上已经错过了这段非活动时间。

巧妙运用 CSS 和 JavaScript 校准偏差

解决偏移误差的关键在于利用 CSS 和 JavaScript 的协同作用。CSS 提供了控制计时器动画的强大功能，而 JavaScript 则使我们能够动态调整计时器的行为。

利用 CSS 冻结动画：

.timer {
  animation-play-state: paused;
}

在网页处于非活动状态时，我们使用 CSS 将计时器的动画置于"paused"状态，有效冻结其运行。这样，当用户重新激活网页时，计时器将从其离开时的精确时刻继续。

使用 JavaScript 监听网页可见性：

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "hidden") {
    timer.pause();
  } else {
    timer.resume();
  }
});

通过监听网页的可见性变化，JavaScript 可以在用户离开或返回页面时自动调整计时器的行为。当网页不可见时，计时器将 приостановлено；当网页可见时，计时器将恢复。

动态计算已逝时间：

为了进一步提高精度，我们还可以使用 JavaScript 动态计算网页非活动期间已逝时间，并根据此时间调整计时器的当前值。这样，当用户返回页面时，计时器将立即反映正确的倒计时时间。

构建高精度倒计时器

整合这些技术，我们就可以构建一个高精度的倒计时器，有效消除偏移误差：

<div class="timer">
  <span id="days"></span>:<span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span>
</div>

.timer {
  animation: countdown 1s linear forwards;
  animation-play-state: paused;
}

@keyframes countdown {
  from {
    left: 0%;
  }

  to {
    left: 100%;
  }
}

const timer = document.querySelector(".timer");
const days = document.getElementById("days");
const hours = document.getElementById("hours");
const minutes = document.getElementById("minutes");
const seconds = document.getElementById("seconds");

let targetDate = new Date("2023-12-31T23:59:59");
let currentTime = new Date();
let elapsedTime = 0;

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "hidden") {
    timer.classList.add("paused");
  } else {
    timer.classList.remove("paused");
    elapsedTime += (new Date() - currentTime) / 1000;
    currentTime = new Date();
  }
});

const updateTimer = () => {
  currentTime = new Date();
  let remainingTime = (targetDate - currentTime + elapsedTime) / 1000;

  days.textContent = Math.floor(remainingTime / 86400);
  hours.textContent = Math.floor((remainingTime % 86400) / 3600);
  minutes.textContent = Math.floor(((remainingTime % 86400) % 3600) / 60);
  seconds.textContent = Math.floor(((remainingTime % 86400) % 3600) % 60);

  if (remainingTime <= 0) {
    timer.classList.remove("paused");
    days.textContent = "00";
    hours.textContent = "00";
    minutes.textContent = "00";
    seconds.textContent = "00";
  }
};

updateTimer();