微信小程序自定义倒计时--可暂停继续停止

2019-04-10  本文已影响0人  刘明洋

微信小程序,实现倒计时效果, 可以根据自己实际情况来修改倒计时具体时间, 本节已24小时为例,实现效果如下图所示:


image.png

index.wxml 文件代码:

<button bindtap="setStart">开始</button>
<button bindtap="setSuspend">{{suspendButton}}</button>
<button bindtap="setStop">停止</button>

<view class='countDown'>倒计时:<text style='color:red'>{{timer_M}}</text>:<text style='color:red'>{{timer_S}}</text></view>

index.js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    timer: '',//定时器名字
    countDownNum: '1440',//倒计时初始值
    timer_M: '24',//m
    timer_S: '00',//s
    suspendButton: '暂停',//暂停按钮标题
    isSuspend: '0' //是否暂停
  },

  onShow: function () {
    
  },

  //开始
  setStart(e) {
    this.countDown();
    wx.showToast({
      title: '开始',
      icon: 'success',
      duration: 1000
    })
  },

  //暂停-继续
  setSuspend(e) {
    let that = this;
    let isSuspend = that.data.isSuspend;
    let suspendButton = that.data.suspendButton;//暂停按钮标题
    if (isSuspend == 0){
      isSuspend = '1';
      suspendButton = "继续";
    }else{
      isSuspend = '0';
      suspendButton = "暂停";
    }
    this.setData({
      isSuspend: isSuspend,//是否暂停
      suspendButton: suspendButton
    })
  },

  //停止
  setStop(e) {
    let that = this;
    clearInterval(that.data.timer);
    this.setData({
      timer: '',//定时器名字
      countDownNum: '1440',//倒计时初始值
      timer_M: '24',//m
      timer_S: '00',//s
      suspendButton: '暂停',//s
    })
  },
  countDown: function () {
    let that = this;
    var m, s;
    let countDownNum = that.data.countDownNum;
    that.setData({
      timer: setInterval(function () {

        let isSuspend = that.data.isSuspend;
        if (isSuspend == 0){

          countDownNum--;

          m = Math.floor(countDownNum / 60);
          s = Math.floor(countDownNum % 60);
          if (m < 10) {
            m = "0" + m;
          }
          if (s < 10) {
            s = "0" + s;
          }

          that.setData({
            countDownNum: countDownNum,
            timer_M: m,
            timer_S: s
          })
          if (countDownNum == 0) {
            clearInterval(that.data.timer);
            that.setData({
              countDownNumString: '截止'
            })
          }
        }
      }, 1000)
    })
  }
})
上一篇下一篇

猜你喜欢

热点阅读