JS实现商城秒杀倒计时功能(动态设置秒杀时间)

这里给出一个详细讲解JS实现商城秒杀倒计时功能（动态设置秒杀时间）的完整攻略，包含以下几个步骤：

步骤一：HTML结构

首先，在HTML页面中设置一个用来显示秒杀倒计时的元素，比如一个id为countdown的<div>，这个元素用来显示剩余的天、时、分、秒。同时，还需要设置一个用来存储当前秒杀的时间戳的隐藏<input>元素，比如一个id为timestamp的隐藏<input>。

下面展示示例的HTML结构：

<div id="countdown">
  <span id="days">00</span>
  <span id="hours">00</span>
  <span id="minutes">00</span>
  <span id="seconds">00</span>
</div>
<input type="hidden" id="timestamp" value="1598323200">

步骤二：获取并设置秒杀时间戳

接下来，在JS代码中，我们需要获取并设置当前秒杀的时间戳。这个时间戳可以通过后端接口获取，也可以直接在前端设置一个默认的值，比如下面这个示例的时间戳为2020年8月25日00:00:00对应的时间戳，即1598323200。

示例代码：

const timestamp = document.getElementById('timestamp').value;

步骤三：倒计时计算与显示

在获取当前秒杀时间戳之后，我们需要根据当前时间和秒杀时间戳计算出剩余的天、时、分、秒，用来显示在页面中。

具体的计算方法如下：

// 倒计时计算
function countDown() {
  const now = new Date().getTime(); // 当前时间戳
  const diff = timestamp * 1000 - now; // 相差的时间戳
  if (diff <= 0) { // 秒杀时间已经过期
    clearInterval(intervalId); // 清除倒计时定时器
    document.getElementById('countdown').innerHTML = '秒杀已结束'; // 显示秒杀已结束
    return;
  }
  const remaining = { // 剩余的天、时、分、秒
    days: Math.floor(diff / (1000 * 60 * 60 * 24)),
    hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
    minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
    seconds: Math.floor((diff % (1000 * 60)) / 1000)
  };
  // 在页面中显示剩余的天、时、分、秒
  document.getElementById('days').innerHTML = remaining.days < 10 ? "0" + remaining.days : remaining.days;
  document.getElementById('hours').innerHTML = remaining.hours < 10 ? "0" + remaining.hours : remaining.hours;
  document.getElementById('minutes').innerHTML = remaining.minutes < 10 ? "0" + remaining.minutes : remaining.minutes;
  document.getElementById('seconds').innerHTML = remaining.seconds < 10 ? "0" + remaining.seconds : remaining.seconds;
}

在计算出剩余的天、时、分、秒之后，我们需要将其显示在页面中。这里需要设置一个定时器，每秒钟调用一次countDown()函数来更新显示的剩余时间。

示例代码：

const intervalId = setInterval(countDown, 1000); // 每秒调用一次countDown()函数

示例说明

示例一：直接设置时间戳

假设我们希望在2020年8月25日00:00:00进行秒杀，如果当前时间在这之前，那么倒计时显示剩余的天、时、分、秒，如果当前时间在这之后，那么倒计时显示秒杀已结束。

我们直接在前端设置秒杀时间戳为2020年8月25日00:00:00对应的时间戳1598323200，在页面中添加上述HTML结构，并在JS代码中添加上述计算倒计时和显示的代码即可。

<div id="countdown">
  <span id="days">00</span>
  <span id="hours">00</span>
  <span id="minutes">00</span>
  <span id="seconds">00</span>
</div>
<input type="hidden" id="timestamp" value="1598323200">

const timestamp = document.getElementById('timestamp').value;

// 倒计时计算
function countDown() {
  const now = new Date().getTime();
  const diff = timestamp * 1000 - now;
  if (diff <= 0) {
    clearInterval(intervalId);
    document.getElementById('countdown').innerHTML = '秒杀已结束';
    return;
  }
  const remaining = {
    days: Math.floor(diff / (1000 * 60 * 60 * 24)),
    hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
    minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
    seconds: Math.floor((diff % (1000 * 60)) / 1000)
  };
  document.getElementById('days').innerHTML = remaining.days < 10 ? "0" + remaining.days : remaining.days;
  document.getElementById('hours').innerHTML = remaining.hours < 10 ? "0" + remaining.hours : remaining.hours;
  document.getElementById('minutes').innerHTML = remaining.minutes < 10 ? "0" + remaining.minutes : remaining.minutes;
  document.getElementById('seconds').innerHTML = remaining.seconds < 10 ? "0" + remaining.seconds : remaining.seconds;
}

const intervalId = setInterval(countDown, 1000);

示例二：通过后端接口获取时间戳

假设我们通过后端接口获取秒杀时间戳，即在页面加载时，向后端发送一个API请求获取秒杀时间戳。我们可以使用XMLHttpRequest或者fetch来发送请求，获取到后端返回的时间戳后，设置timestamp元素的值即可。

<div id="countdown">
  <span id="days">00</span>
  <span id="hours">00</span>
  <span id="minutes">00</span>
  <span id="seconds">00</span>
</div>
<input type="hidden" id="timestamp" value="">

<script>
  // 向后端发送API请求，获取秒杀时间戳
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/seckill/timestamp');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        const timestamp = JSON.parse(xhr.responseText).timestamp;
        document.getElementById('timestamp').value = timestamp;
        const intervalId = setInterval(countDown, 1000);
      } else {
        console.error('API请求失败');
      }
    }
  };
  xhr.send();

  // 倒计时计算
  function countDown() {
    const now = new Date().getTime();
    const diff = timestamp * 1000 - now;
    if (diff <= 0) {
      clearInterval(intervalId);
      document.getElementById('countdown').innerHTML = '秒杀已结束';
      return;
    }
    const remaining = {
      days: Math.floor(diff / (1000 * 60 * 60 * 24)),
      hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
      minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
      seconds: Math.floor((diff % (1000 * 60)) / 1000)
    };
    document.getElementById('days').innerHTML = remaining.days < 10 ? "0" + remaining.days : remaining.days;
    document.getElementById('hours').innerHTML = remaining.hours < 10 ? "0" + remaining.hours : remaining.hours;
    document.getElementById('minutes').innerHTML = remaining.minutes < 10 ? "0" + remaining.minutes : remaining.minutes;
    document.getElementById('seconds').innerHTML = remaining.seconds < 10 ? "0" + remaining.seconds : remaining.seconds;
  }
</script>

以上就是JS实现商城秒杀倒计时功能（动态设置秒杀时间）的完整攻略，希望能够帮助到大家。