JavaScript实现秒杀时钟倒计时

JavaScript实现秒杀时钟倒计时的攻略大致包含以下几个步骤：

1. 获取当前时间和秒杀结束时间
2. 计算倒计时的剩余时间
3. 将剩余时间转换为时、分、秒的形式
4. 将倒计时的时、分、秒填充到HTML中
5. 每隔一秒更新倒计时

下面是完整的攻略：

步骤

1. 获取当前时间和秒杀结束时间

在 JavaScript 中，可以通过 new Date() 取得当前的日期和时间，包括年、月、日、小时、分钟、秒数等信息。同时需要从服务器或本地存储中获取秒杀结束时间。获取结果需要转换为时间戳进行计算。

// 获取当前时间和秒杀结束时间
var now = new Date().getTime();
var end = new Date("2021-12-31 23:59:59").getTime();

2. 计算倒计时的剩余时间

通过当前时间和秒杀结束时间的时间戳的差值，得出剩余时间，单位为毫秒。

// 计算倒计时的剩余时间
var leftTime = end - now;

3. 将剩余时间转换为时、分、秒的形式

将得到的剩余时间（单位毫秒）转换为时、分、秒的形式。

// 将剩余时间转换为时、分、秒的形式
var hours = Math.floor((leftTime / (1000 * 60 * 60)) % 24);
var minutes = Math.floor((leftTime / 1000 / 60) % 60);
var seconds = Math.floor((leftTime / 1000) % 60);

4. 将倒计时的时、分、秒填充到HTML中

用得到的时、分、秒拼接成需要展示的文本格式，然后更新到HTML页面中。

// 将倒计时的时、分、秒填充到HTML中
document.getElementById('hours').innerHTML = hours;
document.getElementById('minutes').innerHTML = minutes;
document.getElementById('seconds').innerHTML = seconds;

<!-- HTML代码 -->
<div class="countdown">
  距离秒杀结束还有 <span id="hours">00</span> :
  <span id="minutes">00</span> :
  <span id="seconds">00</span>
</div>

5. 每隔一秒更新倒计时

使用 setInterval() 方法，每隔一秒更新倒计时，实现倒计时的功能。

// 每秒更新倒计时
setInterval(function() {
  // 重复步骤2~4，更新倒计时
}, 1000);

下面是一个示例：

<!-- HTML代码 -->
<div class="countdown">
  距离秒杀结束还有 <span id="hours">00</span> :
  <span id="minutes">00</span> :
  <span id="seconds">00</span>
</div>

// JavaScript代码
function countdown() {
  var now = new Date().getTime();
  var end = new Date("2021-12-31 23:59:59").getTime();
  var leftTime = end - now;
  var hours = Math.floor((leftTime / (1000 * 60 * 60)) % 24);
  var minutes = Math.floor((leftTime / 1000 / 60) % 60);
  var seconds = Math.floor((leftTime / 1000) % 60);

  // 填充倒计时
  document.getElementById('hours').innerHTML = hours;
  document.getElementById('minutes').innerHTML = minutes;
  document.getElementById('seconds').innerHTML = seconds;
}

// 执行倒计时
countdown();
setInterval(countdown, 1000);

另一个示例：

<!-- HTML代码 -->
<div class="countdown2">
  <span id="hours2"></span> 小时 
  <span id="minutes2"></span> 分钟 
  <span id="seconds2"></span> 秒
</div>

// JavaScript代码
function countdown2() {
  var now = new Date().getTime();
  var end = new Date("2021-12-31 23:59:59").getTime();
  var leftTime = end - now;
  var hours = Math.floor((leftTime / (1000 * 60 * 60)) % 24);
  var minutes = Math.floor((leftTime / 1000 / 60) % 60);
  var seconds = Math.floor((leftTime / 1000) % 60);

  // 填充倒计时
  document.getElementById('hours2').innerHTML = hours;
  document.getElementById('minutes2').innerHTML = minutes;
  document.getElementById('seconds2').innerHTML = seconds;
}

// 执行倒计时
countdown2();
setInterval(countdown2, 1000);