原生jquery实现倒计时功能【animate】动画特效包含天，时分秒

使用jQuery实现一个倒计时功能，并包含动画特效，可以使用setInterval来定时更新倒计时，并使用animate来实现数字的滑动效果。以下是一个简单的实现示例：

HTML部分：

<div id="countdown">
  <span class="time-item time-day"></span>天
  <span class="time-item time-hour"></span>时
  <span class="time-item time-minute"></span>分
  <span class="time-item time-second"></span>秒
</div>

CSS部分：

#countdown .time-item {
  display: inline-block;
  margin: 0 5px;
  font-size: 20px;
  font-weight: bold;
}

jQuery部分：

$(function() {
  function countdown(endTime) {
    var now = new Date(),
        end = new Date(endTime),
        timeDiff = end.getTime() - now.getTime(), // 时间差（毫秒）
        timeDiffSec = timeDiff / 1000, // 转换为秒
        days = Math.floor(timeDiffSec / (3600 * 24)),
        hours = Math.floor((timeDiffSec % (3600 * 24)) / 3600),
        minutes = Math.floor((timeDiffSec % 3600) / 60),
        seconds = Math.floor(timeDiffSec % 60);
 
    // 更新倒计时显示
    $('.time-day').text(days);
    $('.time-hour').text(hours);
    $('.time-minute').text(minutes);
    $('.time-second').text(seconds);
 
    // 如果时间到了，清除定时器
    if (timeDiff <= 0) {
      clearInterval(intervalId);
    }
  }
 
  // 设置倒计时结束时间
  var endTime = '2023-12-31T23:59:59+08:00'; // ISO格式的时间字符串
  var intervalId = setInterval(function() {
    countdown(endTime);
  }, 1000);
  
  // 初始化倒计时显示
  countdown(endTime);
});

在这个示例中，我们定义了一个countdown函数来计算剩余时间，并更新页面上的数字。我们使用了setInterval来每秒调用一次countdown函数，如果时间到了，我们清除定时器。注意，这里的endTime应该是一个符合ISO 8601扩展格式的时间字符串，以确保跨浏览器兼容性。