jquery 倒计时效果实现秒杀思路

下面就是我对 "jquery 倒计时效果实现秒杀思路" 的完整攻略：

1. 确定需求及实现思路

在此需求中，我们需要实现一个倒计时的效果，主要包括以下几个方面：

1. 显示倒计时的时间
2. 当时间到达零时，执行相应的操作

而在实现思路方面，我们可以采用 JavaScript/jQuery来实现。

2. 实现方式

2.1 使用setInterval实现

我们还是先使用setInterval函数实现一个简单的倒计时。具体思路：每秒执行一次，每次执行更新一下倒计时的时间。

function countdown(endTime) {
  var endDate = new Date(endTime);
  var timer = setInterval(function() {
    var now = new Date();
    var leftTime = endDate - now;
    var leftSeconds = Math.floor(leftTime / 1000);

    if (leftSeconds <= 0) {
      clearInterval(timer);
      console.log("时间到了，完成相应的操作");
    } else {
      var sec = leftSeconds % 60;
      var min = Math.floor(leftSeconds / 60);
      console.log(min + "分" + sec + "秒");
    }
  }, 1000);
}

countdown("2021/11/11 00:00:00");

这里使用了setInterval函数循环执行，每隔一秒更新一下时间。

2.2 使用jQuery实现

结合jquery使用，我们可以更加简洁地实现倒计时效果。借助于jquery，我们可以通过html的一些标签或元素，来动态地渲染页面。

<!-- 倒计时面板 -->
<div id="countdown_panel">
  <div class="time">0</div>
  <div class="colon">:</div>
  <div class="time">0</div>
  <div class="colon">:</div>
  <div class="time">0</div>
</div>

/* 倒计时样式 */
#countdown_panel {
  display: flex;
  justify-content: center;
  align-items: center;
}

#countdown_panel .time {
  font-size: 25px;
  line-height: 50px;
  text-align: center;
  width: 50px;
  height: 50px;
  background-color: #f2f2f2;
  border-radius: 5px;
  margin: 0 10px;
}

#countdown_panel .colon {
  font-size: 25px;
  line-height: 50px;
  text-align: center;
  width: 10px;
  height: 50px;
  margin: 0 5px;
  color: #ccc;
}

javascript代码：

function countdown() {
  // 获取倒计时结束时间
  var endTime = new Date("2021/11/11 00:00:00");

  // 定义更新倒计时的函数
  function updateTime() {
    var now = new Date();
    var leftTime = Math.floor((endTime - now) / 1000);

    var hours = Math.floor(leftTime / 3600);
    var minutes = Math.floor((leftTime % 3600) / 60);
    var seconds = Math.floor(leftTime % 60);

    // 格式化输出
    $("#countdown_panel .time:nth-child(1)").text(hours < 10 ? "0" + hours : hours);
    $("#countdown_panel .time:nth-child(3)").text(minutes < 10 ? "0" + minutes : minutes);
    $("#countdown_panel .time:nth-child(5)").text(seconds < 10 ? "0" + seconds : seconds);

    // 倒计时结束
    if (leftTime === 0) {
      clearInterval(timer);
      console.log('时间到了，完成相应的操作');
    }
  }

  // 立即执行一次
  updateTime();

  // 开始定时器
  var timer = setInterval(updateTime, 1000);
}

countdown();

这里我们额外定义了一个名为updateTime的函数，来更新倒计时的效果。然后我们通过jquery选择器来获取相应的标签元素，渲染出倒计时的样式，并按照倒计时方式不断更新。最后判断倒计时结束时停止定时器。

两个不同实现方式，都涉及到了定时器，使用简单函数与$ jquery-selectors 对其进行不同的操作。