倒计时15分钟

最新推荐文章于 2023-12-25 11:55:05 发布

暖风阵阵

最新推荐文章于 2023-12-25 11:55:05 发布

阅读量1.1k

点赞数

分类专栏：微信小程序文章标签：小程序 javascript

本文链接：https://blog.csdn.net/weixin_46899191/article/details/120331149

版权

微信小程序专栏收录该内容

20 篇文章

订阅专栏

微信小程序中，从一个页面点击跳到下一页，开始倒计时15分钟

//(1) wxml
<view class="box">
  <text class="time">{{time.M}}</text>
  <text class="time">{{time.m}}</text>
  <text>：</text>
  <text class="time">{{time.S}}</text>
  <text class="time">{{time.s}}</text>
</view>

//(2) js
// pages/my/index.js
//声明一个变量剩余时间
var remainingTime = 0;
var timer;
Page({
  data: {
      time: {
        M: '0',
        m: '0',
        S: '0',
        s: '0'
    },
  },

  
  onLoad: function () {
    remainingTime = Math.ceil( 900000  / 1000)
    this.timeCutDown()
  },
  timeCutDown() {
    timer = setTimeout(h => {
        if (remainingTime > 0) {
          remainingTime--
            this.timeCutDown()
        } else {
          remainingTime = 0;
            wx.showModal({
                title: '支付已超时，请重新下单',
                showCancel: false,
                confirmText: '确定',
                confirmColor: '#3CC51F',
                success: (result) => {
                    if (result.confirm) {
                        wx.navigateBack({
                            delta: 1
                        });
                    }
                },
                fail: () => {},
                complete: () => {}
            });
        }
    }, 1000)
    this.timeFormat(remainingTime)
  },
  timeFormat(time) {
      if (time < 0) {
          time = 0
      }
      let min = Math.floor(time / 60);
      let second = time % 60;
      min = min < 10 ? "0" + min : "" + min;
      second = second < 10 ? "0" + second : "" + second;
      this.setData({
          'time.M': min.substring(0, 1),
          'time.m': min.substring(1, 2),
          'time.S': second.substring(0, 1),
          'time.s': second.substring(1, 2),
      })
  },
  onUnload: function () {
    clearTimeout(timer)
  },
  onHide: function () {
    clearTimeout(timer)
  },

  
})

// (3)css
/* pages/my/index.wxss */
.box{
  display: flex;
  align-items: center;
  width: 400rpx;
  margin: 0 auto;
}
.box .time{
    width: 48rpx;
    height: 48rpx;
    text-align: center;
    line-height: 48rpx;
    color: #fff;
    background: #656565;
    border-radius: 12rpx;
    margin: 0 10rpx;
}