uni-app使用countdown插件实现倒计时

实现的效果如下:

uni-app使用countdown插件实现倒计时_第1张图片

这里实现的是一个活动倒计时,获取当前时间和活动开始时间,相减得出的时间差就是我们需要的倒计时。使用插件很方便。

首先新建一个项目,选择uni-app,模板选择hello-uniapp,里面有官网的组件可以直接使用。创建之后将components整个文件夹复制到自己的项目中。

uni-app使用countdown插件实现倒计时_第2张图片

在需要使用倒计时的页面引入组件

在页面中放置定时器的位置


	距开始剩
	
        
    

计算定时器中绑定的时间d,h,m,s

var date = new Date();
   var now = date.getTime();
   var star = this.myData.startTime
   var endDate = new Date(star); 
   var end = endDate.getTime(); 
   var leftTime = end-now;
   if (leftTime >= 0) {
		this.d = Math.floor(leftTime/1000/60/60/24);  
		this.h = this.myData.validTime+Math.floor(leftTime/1000/60/60%24);  
		this.m = Math.floor(leftTime/1000/60%60);  
		this.s = Math.floor(leftTime/1000%60);
		console.log(this.d+'天'+this.h+'时'+this.m+'分'+this.s+'秒')
}

完整代码:


 

你可能感兴趣的:(uni-app使用countdown插件实现倒计时)