Countdown of the uniapp component (such as the countdown to reading the agreement and the countdown to completing learning)

One 、 Finally, the effect is achieved

Two 、 The realization of countdown

The main code of the timer is as follows ：

//  Countdown event （times Set the time for yourself , Here is 10）
countDownTime:function(){
	var that = this;
	if(that.times == 10){
			that.sid = setInterval(function() {
			that.times--;
			if(that.times == 0){
                // It's time to clear the timer 
				clearInterval(that.sid);
			}
		}, 1000); 
	}
},

Be careful ： During the countdown of the timer , The user may exit the page , At this time need Clear timer on exit ,  I need to use onUnload(), as follows ：

//  Back to the previous page , Clear timer , Prevent leaving this page , The timer is still running 
onUnload() {
	clearInterval(this.sid);
},

3、 ... and 、 Switch between countdown and learned display  

By setting two Boolean variables （timeshow、learned）, adopt v-show To control its display and non display , The countdown is displayed in the countdown , After that, it shows that you have learned .

The front end ：

<!--  Learning countdown is complete  -->
<view v-show="timeshow" class="study-status-time">{
   {times}}s</view>
<!--  Show learned  -->
<view v-show="learned"  class="study-status"> Have learned </view>

js part ：

//  Countdown event 
countDownTime:function(){
	var that = this;
	if(that.times == 10){
	that.sid = setInterval(function() {
	that.times--;
	if(that.times == 0){
			clearInterval(that.sid);
			that.timeshow=false;
			that.learned=true;
			//  The prompt box pops up 
			uni.showToast({
				title:' The article has been learned ',
				icon:'none',
				duration:2000
			})
		}
	}, 1000); 
  }
},

Four 、 Complete code  

<template>
	<view class="study-content">
		<!--  Article title  -->
		<view class="article-index-title"> Article title </view>
		<!--  Article content  -->
		<view class="article-content">  Article content </view>
		<!--  Learning completion and experience filling  -->
		<view class="content-bottom">
			<view class="content-bootom-item">
				<!--  Learning experience fill  -->
				<view class="idea-input" @click="inputideal()" ><span> Fill in the learning experience </span></view>
				<!--  Learning countdown is complete  -->
				<view v-show="timeshow" class="study-status-time">{
   {times}}s</view>
				<!--  Show learned  -->
				<view v-show="learned"  class="study-status"> Have learned </view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				times:10,
				timeshow:true,
				learned:false,
			}
		},
		//  The countdown method is executed at the beginning of the page 
		onLoad() {
			this.countDownTime()
		},
		//  Back to the previous page , Clear timer , Prevent leaving this page , The timer is still running 
		onUnload() {
			clearInterval(this.sid);
		},
		methods: {
			//  Countdown event 
			countDownTime:function(){
				var that = this;
				if(that.times == 10){
					 that.sid = setInterval(function() {
					 that.times--;
					 if(that.times == 0){
							clearInterval(that.sid);
							that.timeshow=false;
							that.learned=true;
							//  The prompt box pops up 
							uni.showToast({
								title:' The article has been learned ',
								icon:'none',
								duration:2000
							})
					  }
					}, 1000); 
				}
			},
			//  Click the input experience box , If it is not completed, it will prompt that there are still a few seconds , You can enter 
			inputideal:function(){
				if(this.times!=0){
					uni.showToast({
						title:' also '+this.times+' Seconds can be filled in ',
						icon:'none',
						duration:2000
					})
					return
				}
			}
		}
	}
</script>

<style>
.study-content{
   width: 100%;
   height: 100%;
}
 .article-index-title{
	padding: 30rpx 40rpx 20rpx 40rpx;
	font-size: 40rpx;
	font-weight: 600;
	text-align: justify;
}
.article-content{
	box-sizing: border-box;
	padding-left: 40rpx;
	padding-right: 40rpx;
	overflow: hidden;
	font-size: 32rpx;
	width: 100%;
	text-align: justify;
	line-height: 1.8;
	padding-bottom: 50rpx;	
}
.content-bottom{
	height: 120rpx;
	width: 100%;
	position: fixed;
	bottom: 0;
	border-top: 1px #f0f0f0 solid;
	background-color: #ffffff;
	z-index: 100;
}
.content-bootom-item{
	margin-left: 20rpx;
	margin-right: 20rpx;
	display: flex;
	justify-content: space-between;
}
.idea-input{
	width: 75%;
	background-color: #f0f0f0;
	height: 80rpx;
	margin-top: 20rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
}
.idea-input span{
	color: #8b8b8b;
	margin-left: 20rpx;
}
.study-status{
	width: 20%;
	background-color: #0055ff;
	height: 80rpx;
	margin-top: 20rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}
.study-status-time{
	width: 20%;
	background-color: #8f8f8f;
	height: 80rpx;
	margin-top: 20rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}
</style>