一 概述
二 计时功能
2.1 定时器介绍
2.1.1 设置定时器(setInterval)
1
| number setInterval(function callback, number delay, any rest)
|
设置定时器后，返回一个number，根据这个number，传递给clearInterval来取消该定时
2.1.2 取消定时器(clearInterval)
1
| clearInterval(number intervalID)
|
取消由 setInterval 设置的定时器
2.2 定时器示例
2.2.1 页面布局(index.wxml)
1
2
3
4
5
| <view>
<label>{{min}}:{{sec}}</label>
</view>
<button type="primary" bindtap="start">开始</button>
<button type="primary" bindtap="end">结束</button>
|
2.2.2 样式文件(index.wxss)
1
2
3
4
5
6
7
8
9
| view {
display: flex;
justify-content: center;
align-items: center;
}
button {
margin: 10rpx;
}
|
2.2.3 逻辑文件(index.js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| Page({
data: {
min: '00',
sec: '00',
intervalNum: 0
},
start() {
this.queryTime()
},
end() {
debugger;
clearInterval(this.data.intervalNum);
},
queryTime() {
const that = this;
var min = that.data.min;
var sec = that.data.sec;
that.data.intervalNum = setInterval(() => {
sec++;
if (sec >= 60) {
sec = 0;
min++;
that.setData({
min: (min < 10) ? '0' + min : min
})
} else {
that.setData({
sec: (sec < 10) ? '0' + sec : sec
})
}
}, 1000);
}
})
|
2.2.4 效果图
三 将计时器添加到录像
3.1 录像开始前隐藏隐藏显示(根据秒是否开始计时)
1
2
3
| <view class="container-top" hidden="{{sec=='00'}}">
<label>{{min}}:{{sec}}</label>
</view>
|
3.2 录像开始后时间的颜色及大小
1
2
3
4
| .container-top label{
color: red;
font-size: x-large;
}
|
3.3 开始录像及结束录像时计时器的操作
3.3.1 开始计时(录像)
1
2
3
4
5
| this.ctx.startRecord({
success: () => {
this.queryTime();
}
})
|
3.3.2 结束录像(计时)
1
2
3
4
5
6
7
8
9
10
| this.ctx.stopRecord({
success: (res) => {
clearInterval(this.data.intervalNum);
console.log(res);
this.setData({
src: res.tempThumbPath,
videoSrc: res.tempVideoPath
})
}
})
|
四 参考
