微信小程序如何實現倒計時

這篇文章主要介紹“微信小程序如何實現倒計時”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序如何實現倒計時”文章能幫助大家解決問題。

直接上代碼吧

<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();
 },
})

如圖所示：

關于“微信小程序如何實現倒計時”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。