微信小程序實現倒計時

本文實例為大傢分享瞭微信小程序實現倒計時的具體代碼,供大傢參考,具體內容如下

大傢好,今天我們來學習一下倒計時的實現,好好看,好好學,超詳細的。

直接上代碼吧

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

如圖所示:

結語

關於微信小程序實現倒計時就介紹到這裡 ,歡迎大傢多多指教,互相交流,一起學習

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: