微信小程序实现倒计时

本文实例为大家分享了微信小程序实现倒计时的具体代码，供大家参考，具体内容如下

大家好，今天我们来学习一下倒计时的实现，好好看，好好学，超详细的。

直接上代码吧

<view class="title-item">倒计时</view>
<view class="countdown-item">
 <view class="countdown-title">
  <block>
   <text class='tui-conutdown-box'>{{days}}</text>
   <text class="countdown-text">天</text>
   <text class='tui-conutdown-box'>{{hours}}</text>
   <text class="countdown-text">时</text>
   <text class='tui-conutdown-box'>{{minutes}}</text>
   <text class="countdown-text">分</text>
   <text class='tui-conutdown-box'>{{seconds}}</text>
   <text class="countdown-text">秒</text>
  </block>
 </view>
</view>

.countdown-item {
 width: 100%;
 height: 100rpx;
 border: 0rpx solid red;
}

.countdown-title {
 width: 100%;
 height: 50rpx;
 line-height: 50rpx;
 font-size: 40rpx;
 color: #fff;
}

.tui-conutdown-box {
 display: inline-block;
 line-height: 50rpx;
 text-align: center;
 background-color: red;
 color: #fff;
 margin: 0 4rpx;
 padding: 10rpx 20rpx;
}

.tui-countdown-bg {
 background-color: #DF0101;
}

.countdown-text{
 color: #000;
}

Page({
 data: {
  nowDate: '2021-12-22 18:00:00', //结束时间
   countdown: '', //倒计时
   days: '00', //天
   hours: '00', //时
   minutes: '00', //分
   seconds: '00', //秒
 },
 
countTime() {
  let days,hours, minutes, seconds;
  let nowDate = this.data.nowDate;
  console.log(nowDate)
  let that = this;
  let now = new Date().getTime();
  let end = new Date(nowDate).getTime(); //设置截止时间
  // console.log("开始时间：" + now, "截止时间:" + end);
  let leftTime = end - now; //时间差            
  if (leftTime >= 0) {
   days = Math.floor(leftTime / 1000 / 60 / 60 / 24);
   hours = Math.floor(leftTime / 1000 / 60 / 60 % 24);
   minutes = Math.floor(leftTime / 1000 / 60 % 60);
   seconds = Math.floor(leftTime / 1000 % 60);
   seconds = seconds < 10  "0" + seconds : seconds
   minutes = minutes < 10  "0" + minutes : minutes
   hours = hours < 10  "0" + hours : hours
   that.setData({
    countdown: days+":"+hours + "：" + minutes + "：" + seconds,
    days,
    hours,
    minutes,
    seconds
   })
   // console.log(that.data.countdown)
   //递归每秒调用countTime方法，显示动态时间效果
   setTimeout(that.countTime, 1000);
  } else {
   that.setData({
    countdown: '已截止'
   })
  }
},
onLoad: function (options) {
  this.countTime();
},
})

如图所示：

结语

关于微信小程序实现倒计时就介绍到这里 ，欢迎大家多多指教，互相交流，一起学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。