JavaScript仿京东实现秒杀倒计时案例详解

下面是关于“JavaScript仿京东实现秒杀倒计时案例详解”的完整攻略。

1. 准备工作

在开始仿京东实现秒杀倒计时案例之前，我们需要做一些准备工作。具体如下：

1. 在HTML文件中引入所需的CSS文件和JavaScript文件；
2. 创建一个用于显示倒计时的HTML标签，并设置其id属性；
3. 在JavaScript文件中获取该HTML标签的id属性值，利用document.getElementById()方法获取该标签的DOM对象；
4. 获取秒杀的倒计时截止时间，并将其设置在一个变量中，比如endTime；

2. 实现思路

实现仿京东秒杀倒计时的主要思路如下：

1. 在页面加载时，先将endTime转换为时间对象；
2. 每一秒钟更新倒计时，即减去1秒，然后将减去1秒后的结果转换成倒计时所需的字符串格式（例如'00:00:05'）；
3. 将倒计时字符串更新到HTML标签中。

3. 实现代码

下面是一个简单的JavaScript实现仿京东秒杀倒计时的代码：

// 获取倒计时显示标签的DOM对象
var countdown = document.getElementById('countdown');

// 获取秒杀倒计时结束时间
var endTime = new Date('2021-06-30 18:00:00').getTime();

// 定时器每一秒更新一次倒计时
setInterval(function() {
  // 获取当前时间戳
  var nowTime = new Date().getTime();

  // 计算剩余时间（单位：毫秒）
  var leftTime = endTime - nowTime;

  // 如果秒杀倒计时已经结束，显示提示信息
  if (leftTime < 0) {
    countdown.innerHTML = '秒杀已结束';
    return; // 终止定时器
  }

  // 将剩余时间转换为指定格式的倒计时字符串
  var leftSeconds = Math.floor(leftTime / 1000);
  var hours = Math.floor(leftSeconds / 3600);
  var minutes = Math.floor((leftSeconds % 3600) / 60);
  var seconds = leftSeconds % 60;
  var timeStr = ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);

  // 更新倒计时显示
  countdown.innerHTML = timeStr;
}, 1000);

4. 示例说明

示例1：在仿京东秒杀倒计时案例中，时间格式统一为'小时:分钟:秒钟'，并且对于单个数字，前面需要补0。这个要求可以通过以下代码实现：

var timeStr = ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);

该代码使用了字符串方法slice()来保证时间格式的正确性。

示例2：在仿京东秒杀倒计时案例中，需要在秒杀时间结束后显示'秒杀已结束'的提示信息。这个要求可以通过以下代码实现：

if (leftTime < 0) {
  countdown.innerHTML = '秒杀已结束';
  return; // 终止定时器
}

该代码在倒计时结束后检查leftTime是否小于0，如果小于0则显示提示信息，并通过return语句终止定时器，以免产生意外的计时器效果。