uniapp实现简单的倒计时功能

uniapp 实现简单倒计时功能

弊端: 退出之后时间清空 重新计时

实现实时倒计时可直接调用相关组件

<template>
	<view>
	 <view class="auctionTop">
	<text>拍卖助手即将正式上线</text>
	<view>{{countdown}}</view>
	 </view>
	 <view class="auctiontwo">
		 <text>拍卖平台即将推出 敬请期待~</text>
	 </view>
	 
	 <view class="actionlist">
		 <button>拍卖</button>

	 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				     h:1,//时
				     m:59,//分
				    s:59,//秒
				     countdown:'1:59:59',//倒计时
				    timer:null,//重复执行
			}
		},
		onLoad(){
		     this.timer = setInterval(()=>{
		         this.timeCount()
		     },1000)
		 },
		methods: {
			   timeCount(){
			              --this.s;
			                if(this.s<0){
			                    --this.m;
			                    this.s=59;
			               }
			               if(this.m<0){
		                     --this.h;
		                    this.m=59
			                }
			                if(this.h<0){
			                    this.s=0;
			                    this.m=0;
		               }
			                this.countdown = this.h+":"+this.m+":"+this.s
			            },
			
		}
	}
</script>

<style>
.auctionTop{
	width: 100%px;
	height: 200px;
	border: 1px white solid;	
	
}
.auctionTop text{
	font-size: 20px;
	line-height: 50px;
	text-align: center;
	margin-left: 150rpx;

}
.auctiontwo{
	width: 100%px;
	height: 300px;
}

.auctiontwo text{
	line-height: 400px;
	margin-left: 100px;
}

.actionlist{
	
}
</style>