JavaScript模拟实现”双11″限时秒杀效果

下面是“JavaScript模拟实现双11限时秒杀效果”的完整攻略。

下面是“JavaScript模拟实现"双11"限时秒杀效果”的完整攻略。

步骤一：准备工作

1. 首先，在页面中添加一个倒计时的 DOM 元素。
2. 然后，在 JavaScript 中设置秒杀开始和结束的时间，并将其转换为 Date 对象。

var startTime = new Date('2021-11-11 00:00:00').getTime(); // 秒杀开始时间
var endTime = new Date('2021-11-11 23:59:59').getTime(); // 秒杀结束时间

1. 在页面加载时，在倒计时的 DOM 元素中显示倒计时。

步骤二：实现倒计时

1. 使用 JavaScript 计算秒杀开始和结束时间与当前时间的时间差，得到剩余的毫秒数。
2. 将剩余毫秒数转换为天、时、分、秒。
3. 使用 JavaScript 将剩余天、时、分、秒显示在页面中的倒计时 DOM 元素中。代码示例：

var countDown = setInterval(function() {
  var nowTime = new Date().getTime(); // 当前时间
  var timeDiffStart = startTime - nowTime; // 秒杀开始时间与当前时间的时间差
  var timeDiffEnd = endTime - nowTime; // 秒杀结束时间与当前时间的时间差

  var timeDiff = timeDiffStart > 0 ? timeDiffStart : timeDiffEnd; // 判断是否未开始秒杀

  if(timeDiff < 0) { // 秒杀已结束
    clearInterval(countDown);
    document.getElementById('countdown').innerHTML = '秒杀已结束';
  } else { // 秒杀未结束
    var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

    document.getElementById('countdown').innerHTML = '距离秒杀开始还有 ' + days + ' 天 ' + hours + ' 时 ' + minutes + ' 分 ' + seconds + ' 秒';
  }
}, 1000);

步骤三：秒杀商品

1. 在秒杀开始时间到来时，启用秒杀商品按钮，并设置其点击事件来处理用户的秒杀请求。
2. 在处理用户秒杀请求时，向后端发送请求，进行库存判断，并根据库存判断结果返回用户秒杀结果。代码示例：

function seckill() {
  // 判断秒杀是否已开始
  var nowTime = new Date().getTime(); // 当前时间
  var timeDiffStart = startTime - nowTime; // 秒杀开始时间与当前时间的时间差

  if(timeDiffStart <= 0) { // 秒杀已开始
    // 发送秒杀请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/seckill');
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var result = JSON.parse(xhr.responseText);
        if(result.success) { // 秒杀成功
          alert('秒杀成功！');
        } else { // 秒杀失败
          alert(result.message);
        }
      }
    };

    xhr.send(JSON.stringify({
      skuId: '123456', // 商品 SKU ID
      userId: '123', // 用户 ID
      token: 'token123' // 用户 Token
    }));
  } else { // 秒杀未开始
    alert('秒杀未开始，请稍后再试！');
  }
}

以上就是实现“JavaScript模拟实现"双11"限时秒杀效果”的完整攻略。

示例一：网易考拉海购的“双11”秒杀活动

示例二：京东的“秒杀”活动