微信小程序展示倒计时

html

html 复制代码
  <view class="countdown">  
    <text>倒计时:</text>  
    <text wx:for="{{countdown}}" wx:key="index">{{item}}</text>  
  </view>

ts

javascript 复制代码
 data: {
    countdown: [], // 存放倒计时数组  
    targetTime: '', // 目标时间戳  
    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) {  
      // 倒计时结束,清除定时器  
      clearInterval(that.data.intervalId);  
      that.setData({  
        countdown: ['倒计时结束'],  
      });  
    } 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();  


}
相关推荐
尘浮生4 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen6 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘11 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡13 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼17 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857519 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027719 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__1 天前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序