基于jQuery的倒计时实现代码

关于“基于jQuery的倒计时实现代码”的攻略，我们可以分为以下几个步骤详细讲解：

1. 创建html结构

首先，我们需要在html中创建倒计时所需的html结构。

<div id="countdown">
  <span class="days"></span>
  <span class="hours"></span>
  <span class="minutes"></span>
  <span class="seconds"></span>
</div>

2. 导入jQuery

我们需要在html中导入jQuery库，用于实现倒计时的逻辑。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

3. 编写jQuery代码

在页面加载完成后，我们使用jQuery选择器选中倒计时所需的元素，并通过计算时间差来实现倒计时。

$(document).ready(function(){
  // 目标时间
  var endTime = new Date('2022-01-01 00:00:00').getTime();

  // 每秒更新倒计时时间
  setInterval(function(){
    // 当前时间
    var now = new Date().getTime();

    // 时间差
    var distance = endTime - 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);

    // 更新倒计时显示
    $('#countdown .days').text(days + '天');
    $('#countdown .hours').text(hours + '小时');
    $('#countdown .minutes').text(minutes + '分钟');
    $('#countdown .seconds').text(seconds + '秒');
  }, 1000);
});

此时，我们的倒计时就已经完成了。

示例说明

示例一

我们可以根据实际需求修改目标时间，比如设置倒计时为距离2022年1月1日还有一天一小时。

// 目标时间
var endTime = new Date('2022-01-01 00:00:00').getTime() - (24 * 60 * 60 * 1000) - (60 * 60 * 1000);

示例二

我们也可以自定义倒计时的样式，比如采用圆形倒计时样式。

<div id="circle-countdown">
  <div class="countdown-item days">
    <span class="countdown-value"></span>
    <span class="countdown-label">天</span>
  </div>
  <div class="countdown-item hours">
    <span class="countdown-value"></span>
    <span class="countdown-label">小时</span>
  </div>
  <div class="countdown-item minutes">
    <span class="countdown-value"></span>
    <span class="countdown-label">分钟</span>
  </div>
  <div class="countdown-item seconds">
    <span class="countdown-value"></span>
    <span class="countdown-label">秒</span>
  </div>
</div>

#circle-countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.countdown-item {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0 10px;
  border-radius: 50%;
  color: #fff;
  background-color: #999;
  text-align: center;
  font-size: 20px;
  line-height: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.countdown-item:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f00;
  z-index: -1;
  transform: scale(1, 1);
  transition: transform 1s cubic-bezier(0.5, 1.6, 0.4, 0.5), box-shadow 1s;
}

.countdown-item.days:before {
  background-color: #0ff;
}

.countdown-item.hours:before {
  background-color: #f0f;
}

.countdown-item.minutes:before {
  background-color: #ff0;
}

.countdown-item.seconds:before {
  background-color: #0f0;
}

.countdown-item .countdown-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.countdown-item .countdown-label {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: bold;
}

$(document).ready(function(){
  // 目标时间
  var endTime = new Date('2022-01-01 00:00:00').getTime();

  // 每秒更新倒计时时间
  setInterval(function(){
    // 当前时间
    var now = new Date().getTime();

    // 时间差
    var distance = endTime - 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);

    // 更新倒计时显示
    $('#circle-countdown .days .countdown-value').text(days);
    $('#circle-countdown .hours .countdown-value').text(hours);
    $('#circle-countdown .minutes .countdown-value').text(minutes);
    $('#circle-countdown .seconds .countdown-value').text(seconds);

    // 更新圆形倒计时样式
    $('#circle-countdown .countdown-item:before').css('transform', 'scale(' + (10 - seconds) / 10 + ')');
  }, 1000);
});

以上就是基于jQuery实现倒计时的完整攻略，希望能对你有所帮助。