微信小程序15分钟倒计时

热心的web市民

已于 2022-05-18 16:43:37 修改

阅读量381

点赞数

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

于 2022-03-03 11:47:09 首次发布

原文链接：https://blog.csdn.net/weixin_40762926/article/details/117280850?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164627726616780269843616%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164627726616780269843616&b

版权

微信小程序同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

该博客展示了一个使用WXML和JS实现的计时器功能，用于显示从特定开始时间到15分钟后的倒计时。当计时结束时，会触发支付超时的提示。代码中定义了`time`函数来更新剩余分钟和秒数，并在时间结束后调用`wx.showToast`显示错误消息。

摘要由CSDN通过智能技术生成

WXML

<text>{{minute}} : {{second}}<text>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    minute: '',
    second: '',
  },
  time() {
    var that = this
    var startTime = '2022/03/03 11:20:00' //开始时间
    var start = new Date(startTime.replace(/-/g, "/")).getTime()
    var endTime = start + 15 * 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);
      that.setData({
        minute: m < 10 ? '0' + m : m,
        second: s < 10 ? '0' + s : s
      })
      setTimeout(that.time, 1000);
    } else {
      wx.showToast({
        title: '支付超时',
        icon: 'error'
      })
      console.log('已截止')
      that.setData({
        countdown: '00:00'
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.time()
  },
})