正计时器uniapp-小程序vue

简单 正计时器uniapp-小程序vue

vue将标签 view 换成 div 即可

只有简单的 开始 、暂停逻辑；

<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>