淘先锋技术网

首页 1 2 3 4 5 6 7

jquery时间倒计时怎么写

jQuery时间倒计时是一个常见的功能，用于在网页上展示一个倒计时的效果，比如距离结束时间还有多长时间等。下面我们来看如何使用jQuery实现一个简单的倒计时。


<!-- HTML结构 -->
<div class="countdown">
  <span class="days">0</span> Days
  <span class="hours">0</span> Hours
  <span class="minutes">0</span> Minutes
  <span class="seconds">0</span> Seconds
</div>

<!-- JS代码 -->
$(document).ready(function() {
  var endDate = new Date("December 31, 2021 23:59:59").getTime(); // 结束日期时间戳

  var x = setInterval(function() {
    var now = new Date().getTime(); // 当前日期时间戳
    var distance = endDate - now; // 时间差

    var days = Math.floor(distance / (1000 * 60 * 60 * 24)); // 天
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 小时
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); // 分钟
    var seconds = Math.floor((distance % (1000 * 60)) / 1000); // 秒

    // 将倒计时数值显示在页面上
    $(".days").html(days);
    $(".hours").html(hours);
    $(".minutes").html(minutes);
    $(".seconds").html(seconds);

    if (distance < 0) { // 倒计时结束
      clearInterval(x);
      $(".countdown").html("EXPIRED");
    }
  }, 1000); // 每1秒更新倒计时
});

jquery时间倒计时怎么写

以上代码包含了HTML结构和JS逻辑，首先定义了一个含有四个span标签的div容器作为倒计时的展示区域，并在JS中获取了结束日期时间戳，然后使用setInterval()函数每1秒更新倒计时的数值，并将其显示在页面上。

判断倒计时结束的方法是在JS中使用条件判断语句：如果时间差小于0，则清除定时器并将倒计时区域显示为“EXPIRED”。

jqueryvarvar函数