微信小程序?qū)崿F(xiàn)計時器
更新時間:2022年09月09日 14:18:04 作者:K@rna
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)計時器,小程序點擊事件觸發(fā)計時器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)計時器的具體代碼,供大家參考,具體內(nèi)容如下
微信小程序點擊事件觸發(fā)計時器
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("結(jié)束計時") ? ? ? ? ? ? ? ? ? //清除計時器 ?即清除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: '繼續(xù)', ? ? ? cancelColor: '#000000', ? ? ? confirmText: '確定退出', ? ? ? confirmColor: '#1677FF', ? ? ? success: (result) => { ? ? ? ? if (result.confirm) { ? ? ? ? ? // 獲取結(jié)束時間 ? ? ? ? ? var endTime = util.formatTime(new Date()); ? ? ? ? ? console.log(endTime) ? ? ? ? ? ? console.log("結(jié)束計時") ? ? ? ? ? //清除計時器 ?即清除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: () => {} ? ? }); ? ?? ? }, ? ? // 關(guān)閉模態(tài)框方法 ? close: function () { ? ? var that = this; ? ? // 判斷點擊關(guān)閉時狀態(tài) ? ? if (that.data.showStop) { ? ? ? //點擊開始后關(guān)閉 ? ? ? that.stop_inspection(); ? ? } else if (!that.data.showStop) { ? ? ? // 沒有開始就關(guān)閉 ? ? ? 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; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
全面解析JS字符串和正則表達式中的match、replace、exec等函數(shù)
這篇文章主要介紹了全面解析JS字符串和正則表達式中的match、replace、exec等函數(shù)的相關(guān)資料,需要的朋友可以參考下2016-07-07javascript xml為數(shù)據(jù)源的下拉框控件
此控件以xml為數(shù)據(jù)源,可以進行輸入的多屬性自動適配2009-07-07JavaScript mixin實現(xiàn)多繼承的方法詳解
這篇文章主要介紹了JavaScript mixin實現(xiàn)多繼承的方法,結(jié)合實例形式分析了mixin多繼承的原理與具體實現(xiàn)技巧,需要的朋友可以參考下2017-03-03