正計時器uniapp-小程式vue

蝸牛前端發表於2020-11-04

簡單 正計時器uniapp-小程式vue

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>

相關文章