当前位置:编程学习 > uniapp >>

正计时器uniapp-小程序vue

简单 正计时器uniapp-小程序vue只有简单的 开始 、暂停逻辑;

<template>
<view class="timer">
{{ti}}
<view @click="pause">暂停</view>
<view @click="begin">开始</view>

</view>


</template>
<script>
export default {
data() {
return {
ti:'00:00:00',
timer: '',

hour: 0,
minutes: 0,
seconds: 0
};
},

destroyed() {
clearInterval(this.timer);
},

methods: {
// 开始计时
begin(){
this.timer = setInterval(this.startTimer, 1000);
},
startTimer() {
this.seconds += 1;
if (this.seconds >= 60) {
this.seconds = 0;
this.minute = this.minute + 1;
}

if (this.minute >= 60) {
this.minute = 0;
this.hour = this.hour + 1;
}
this.ti= (this.hour < 10 ? '0' + this.hour : this.hour) + ':' + (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds);
},
// 暂停倒计时
pause() {
if(this.timer) {
clearInterval(this.timer);
// this.timer = null
}
},
}
};
</script>
<style></style>

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,