html
?

  <view class="countdown">  
    <text>倒計時：</text>  
    <text wx:for="{{countdown}}" wx:key="index">{{item}}</text>  
  </view>

ts
?

 data: {
    countdown: [], // 存放倒計時數(shù)組  
    targetTime: '', // 目標(biāo)時間戳  
    intervalId: null, // 定時器ID 
}
startCountdown () {  
  const that = this;  
  // 每秒更新一次倒計時  
  this.data.intervalId = setInterval(function () {  
    const now = new Date().getTime();  
    const diff = that.data.targetTime - now;  
      
    if (diff <= 0) {  
      // 倒計時結(jié)束，清除定時器  
      clearInterval(that.data.intervalId);  
      that.setData({  
        countdown: ['倒計時結(jié)束'],  
      });  
    } else {  
      // 計算剩余的天、時、分、秒  
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));  
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));  
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));  
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);  
        
      that.setData({  
        countdown: [days, '天', hours, '時', minutes, '分', seconds, '秒'],  
      });  
    }  
  }, 1000);     
  },
  onLoad: function (options) {   
  this.setData({  
    targetTime: new Date('2024-04-28 16:53:10').getTime(),  
  });  
  this.startCountdown();  


}

文章來源地址http://www.zghlxwxcb.cn/news/detail-857986.html

到了這里，關(guān)于微信小程序展示倒計時的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！