微信小程序 支付倒计时

效果

wxml

<view class="solid-bottom text-xxl padding  text-center">

        <text class=" text-red">支付剩余  {{countdown}}</text>

 </view>

js

Page({
 
    /**
     * 页面的初始数据
     */
    data: {
      
    },
    
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      var that = this
      that.countDown();
    },
 
    //倒计时
    countDown() {
      var that = this
      var starttime = '2022/02/15 15:38:19'//倒计时开始时间
      var start = new Date(starttime.replace(/-/g, "/")).getTime()
      var endTime = start + 30 * 60000
   
      var date = new Date(); //现在时间
      var now = date.getTime(); //现在时间戳
   
      var allTime = endTime - now
      var m, s;
      if (allTime > 0) {
        m = Math.floor(allTime / 1000 / 60 % 60);
        s = Math.floor(allTime / 1000 % 60);
        s = s < 10 ?"0"+s:s;
        that.setData({
          countdown: m + "：" + s,
        })
        setTimeout(that.countDown, 1000);
      } else {
        console.log('已截止')
        that.setData({
          countdown: '00:00'
        })
      }
    },
  
})