vue 组件 计时器 开始暂停重置

<!--template部分-->
<template>
    <view class="content">
        <view>{
     {
     nums}}</view>
		<view>
			<button type="primary" class="primary" @tap="stop">暂停</button>	
			<button type="primary" class="primary" @tap="begin">开始</button>
			<button type="primary" class="primary" @tap="reset">重置</button>
			
		</view>
	</view>
</template>
<!--script部分-->
<script>
export default{
     
data(){
     
return{
     
nums:'',
num:'',
timer: null,
hour:0,
minute:0,
second:0,
millisecond:0,
}},
methods:{
     
	stop() {
     
		clearInterval(this.timer);
		 this.num = hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒';
	},
	begin(){
     
			var hour=this.hour, minute=this.minute, second=this.second; /*时 分 秒*/
			// hour = minute = second = 0; //初始化
            var millisecond = this.millisecond; //毫秒
           this.num = hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒';
		   if(hour+minute+second+millisecond==0){
     
			this.timer = setInterval(() => {
     
                millisecond = millisecond + 50;
                // console.log("---millisecond----"+millisecond);
                if (millisecond >= 1000) {
     
                    millisecond = 0;
                    second = second + 1;
                }
                if (second >= 60) {
     
                    second = 0;
                    minute = minute + 1;
                }
 
                if (minute >= 60) {
     
                    minute = 0;
                    hour = hour + 1;
                }
                // console.log("-------"+hour+'时'+minute+'分'+second+'秒');
                this.nums = hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒';
				this.hour=hour, this.minute=minute, this.second=second,this.millisecond=millisecond;
			}, 50);}else{
     
				clearInterval(this.timer);
				this.timer = setInterval(() => {
     
				    millisecond = millisecond + 50;
				    // console.log("---millisecond----"+millisecond);
				    if (millisecond >= 1000) {
     
				        millisecond = 0;
				        second = second + 1;
				    }
				    if (second >= 60) {
     
				        second = 0;
				        minute = minute + 1;
				    }
				 
				    if (minute >= 60) {
     
				        minute = 0;
				        hour = hour + 1;
				    }
				    // console.log("-------"+hour+'时'+minute+'分'+second+'秒');
				    this.nums = hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒';
					this.hour=hour, this.minute=minute, this.second=second,this.millisecond=millisecond;},50);
			}
		},
		reset(){
     
				clearInterval(this.timer);
			this.hour=0;this.minute=0; this.second=0;this.millisecond=0;
			 this.nums =this. hour+'时'+this.minute+'分'+this.second+'秒'+this.millisecond+'毫秒';
		},
	}
}
</script>
<!--style部分-->
<style></style>

你可能感兴趣的:(vue)