微信小程序 - 计时器（弹出层）

微信小程序点击事件触发计时器

1.wxml

<view class="button" bindtap="open_modal">开始巡查</view>

<!-- 弹出层 -->
<view class="mask-bg" wx:if="{{showModal}}"></view>
<view class="mask-item" wx:if="{{showModal}}">
    <view class="mask-top-item">
        <view class="mask-top-title">计时器</view>
        <image class="close-item-img" src="/images/task/close.png" bindtap="close"></image>
    </view>
    <view class="collect-time">{{showHour}}:{{showMin}}:{{showSec}}</view>
    <!-- <view class="divLine2"></view> -->
    <block wx:if="{{showStop}}">
        <image class="start-img" src="/images/task/stop.png" bindtap="stop"></image>
    </block>
    <block wx:elif="{{!showStop}}">
        <image class="start-img" src="/images/task/start.png" bindtap="start"></image>
    </block>
    <image class="bottom-bg" src="/images/task/bg.png"></image>
</view>

2.js

var util = require('../../utils/util.js');
data: {
    showModal: false,
    showStop:false,
    //存储计时器
    setInter: '',
    hour: 1,
    min: 1,
    sec: 1,
    showSec: "00",
    showMin: "00",
    showHour: "00"
  },

open_modal: function () {
    var that = this;
    that.setData({
      showModal: true,
    })
  },

// 开始计时
start: function () {
    var that = this;
    that.setData({
      showStop: true
    })
    wx.showToast({
      title: '开始计时',
      duration: 1000,
      complete() {
        // 获取开始时间
        var beginTime = util.formatTime(new Date());
        console.log(beginTime)

        console.log("开始计时")
        //将计时器赋值给setInter
        that.data.setInter = setInterval(
          function () {
            if (that.data.sec != 60) {
              if (that.data.sec <= 9) {
                let showSec = '0' + that.data.sec
                that.setData({
                  showSec: showSec,
                  sec: that.data.sec + 1,
                })
              } else {
                that.setData({
                  showSec: that.data.sec,
                  sec: that.data.sec + 1,
                })
              }
            } else {
              if (that.data.min != 60) {
                // 60s 进 1min
                if (that.data.min <= 9) {
                  let showMin = '0' + that.data.min
                  that.setData({
                    sec: 0,
                    showSec: "00",
                    showMin: showMin,
                    min: that.data.min + 1,
                  })
                } else {
                  that.setData({
                    sec: 0,
                    showSec: "00",
                    showMin: that.data.min,
                    min: that.data.min + 1,
                  })
                }
              } else {
                // 60min 进 1hour
                if (that.data.hour != 24) {
                  if (that.data.hour <= 9) {
                    let showHour = '0' + that.data.hour
                    that.setData({
                      min: 0,
                      showMin: "00",
                      showHour: showHour,
                      hour: that.data.hour + 1,
                    });
                  } else {
                    that.setData({
                      min: 0,
                      showMin: "00",
                      showHour: that.data.hour,
                      hour: that.data.hour + 1,
                    });
                  }
                } else {
                  //24小时
                  var endTime = util.formatTime(new Date());
                  console.log(endTime)

                  console.log("结束计时")
                  //清除计时器  即清除setInter
                  clearInterval(that.data.setInter);
                  that.setData({
                    showModal: false,
                    showStop: false,
                    sec: 1,
                    min: 1,
                    hour: 1,
                    showSec: "00",
                    showMin: "00",
                    showHour: "00"
                  })
                }
              }
            }
          }, 1000);
      }
    });
  },

  // 停止计时
  stop: function () {
    var that = this;
    wx.showModal({
      title: '提示',
      content: '是否确定退出',
      showCancel: true,
      cancelText: '继续',
      cancelColor: '#000000',
      confirmText: '确定退出',
      confirmColor: '#1677FF',
      success: (result) => {
        if (result.confirm) {
          // 获取结束时间
          var endTime = util.formatTime(new Date());
          console.log(endTime)

          console.log("结束计时")
          //清除计时器  即清除setInter
          clearInterval(that.data.setInter);
          that.setData({
            showModal: false,
            showStop: false,
            sec: 1,
            min: 1,
            hour: 1,
            showSec: "00",
            showMin: "00",
            showHour: "00"
          })
        }
      },
      fail: () => {},
      complete: () => {}
    });
    
  },

  // 关闭模态框方法
  close: function () {
    var that = this;
    // 判断点击关闭时状态
    if (that.data.showStop) {
      //点击开始后关闭
      that.stop_inspection();
    } else if (!that.data.showStop) {
      // 没有开始就关闭
      that.setData({
        showModal: false,
      })
    }
  },

3.wxss

.button {
    margin-top: 32rpx;
    width: 702rpx;
    height: 98rpx;
    background: #1677FF;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
}

.mask-bg {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.7;
    opacity: 0.70;
    filter: alpha(opacity=70);
}

.mask-item {
    text-align: center;
    position: absolute;
    top: 24.5%;
    left: 8%;
    width: 84%;
    height: 55.5%;
    border-radius: 8rpx;
    /* opacity: 0.55; */
    background-color: #FFFFFF;
    z-index: 1002;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mask-top-item {
    height: 128rpx;
    width: 100%;
    background-color: #1677FF;
    z-index: 1003;
    display: flex;
    align-items: center;
}

.mask-top-title {
    width: 240rpx;
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    margin-left: 200rpx;
}

.close-item-img {
    margin-left: 115rpx;
    width: 44rpx;
    height: 44rpx;
}

.collect-time {
    margin-top: 112rpx;
    width: 552rpx;
    height: 116rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120rpx;
    font-family: ArialMT;
}

/* .divLine2 {
    margin-top: 42rpx;
    width: 524rpx;
    height: 2rpx;
    background: #DDDDDD;
} */

.start-img {
    margin-top: 64rpx;
    height: 176rpx;
    width: 176rpx;
}

.bottom-bg{
    width: 100%;
    height: 93rpx;
    position: absolute;
    bottom:0%;
    z-index: 1003;
}