微信小程序实现计时器_javascript技巧_

开始巡查                 计时器                   {{showHour}}:{{showMin}}:{{showSec}}                                               

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,       })     }   },

.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; }