uniapp倒计时

效果图
请添加图片描述

/*
 * 单独的倒计时
 * 将天数转为小时数
 * 时分秒倒计时
 * 参数:时间戳,this
 * 页面要在data里添加 Areahours,Areaminutes,Areaseconds
 */
function Areacountdown(e,that){
	return new Promise((rel,rej)=>{
		let date = new Date();
		let time = date.getTime();//当前时间
		if(e - time > 0){
			var lag =  (e- time);
			//计算出相差天数
			var days = Math.floor(lag / (24 * 3600 * 1000));
			//计算出小时数
			var leave1 = lag % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
			var hours = Math.floor(leave1 / (3600 * 1000));
			//计算相差分钟数
			var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
			var minutes = Math.floor(leave2 / (60 * 1000));
			//计算相差秒数
			var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
			var seconds = Math.round(leave3 / 1000);
			
			
			//只有一位数就在前面加0并转为字符串
			function part(val){
				var lenval = (val + '').length;
				if(lenval >= 2){
					return val;
				}else{
					return '0' + val;
				}
			}
			
			var Areahours = (days*24)+hours; //将天数转成时并加上原有的时
			that.Areahours = part(Areahours); //时
			that.Areaminutes = part(minutes); //分
			that.Areaseconds = part(seconds); //秒
			
			//测试
			/* that.Areahours = part(0);
			that.Areaminutes = part(0);
			that.Areaseconds = part(5); */	
			
			
			var setTime = setInterval(() =>{
				var h = parseInt(that.Areahours);
				var m = parseInt(that.Areaminutes);
				var s = parseInt(that.Areaseconds);
				
				if( h > 0 || m > 0 || s > 0){
					if(s > 0){
						s -=1;
						that.Areaseconds = part(s);
					}else{
						//分减一,秒加59
						if(m > 0){
							m -=1;
							that.Areaminutes = part(m);
							that.Areaseconds = 59;
						}else{
							//时减一,分加59,秒加59
							if(h > 0){
								h -=1;
								that.Areahours = part(h);
								that.Areaminutes = 59;
								that.Areaseconds = 59;
							}
						}
					}
				}else{
					rel();//活动结束回调
					console.log('倒计时结束!')
					clearInterval(setTime);
				}
			},1000)
		}
	})
}



/*
 * 多个倒计时
 * 参数:时间戳数组(与数据的下标要一一对应),this
 * 页面要在数组每一项里添加 Arrdays,Arrhours,Arrminutes,Arrseconds
 * 页面存放数据的名字auctionList
 */
function Arrcountdown(arrTime,that){

	return new Promise((rel,rej)=>{
		let date = new Date();
		let time = date.getTime();//当前时间

		//只有一位数就在前面加0并转为字符串
		function part(val){
			var lenval = (val + '').length;
			if(lenval >= 2){
				return val;
			}else{
				return '0' + val;
			}
		}
		
		function difference(e,index){
			if(e - time > 0){
				var lag =  (e- time);
				//计算出相差天数
				var days = Math.floor(lag / (24 * 3600 * 1000));
				//计算出小时数
				var leave1 = lag % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);

				that.auctionList[index].Arrdays = part(days); //天
				that.auctionList[index].Arrhours = part(hours); //时
				that.auctionList[index].Arrminutes = part(minutes); //分
				that.auctionList[index].Arrseconds = part(seconds); //秒
				
			}else{
				console.log('ok')
			}
		}
		
		for(let i=0;i<arrTime.length;i++){
			difference(arrTime[i],i);
		}
		
		that.AllSetTime = setInterval(()=>{
			for(let q=0;q<arrTime.length;q++){
				var d = parseInt(that.auctionList[q].Arrdays);
				var h = parseInt(that.auctionList[q].Arrhours);
				var m = parseInt(that.auctionList[q].Arrminutes);
				var s = parseInt(that.auctionList[q].Arrseconds);
				
				if( d > 0 || h > 0 || m > 0 || s > 0){
					if(s > 0){
						s -=1;
						that.auctionList[q].Arrseconds = part(s);
					}else{
						//分减一,秒加59
						if(m > 0){
							m -=1;
							that.auctionList[q].Arrminutes = part(m);
							that.auctionList[q].Arrseconds = 59;
						}else{
							//时减一,分加59,秒加59
							if(h > 0){
								h -=1;
								that.auctionList[q].Arrhours = part(h);
								that.auctionList[q].Arrminutes = 59;
								that.auctionList[q].Arrseconds = 59;
							}else{
								if(d > 0){
									d -=1;
									that.auctionList[q].Arrdays = part(d);
									that.auctionList[q].Arrhours = 23;
									that.auctionList[q].Arrminutes = 59;
									that.auctionList[q].Arrseconds = 59;
								}
							}
						}
					}
				}else{
					console.log('该项数据倒计时结束')
				}
			}
		},1000)
		
	})
}


export{
	Areacountdown,
	Arrcountdown
}

单个倒计时页面使用

import {Areacountdown} from 'xxxx'
export default{
	data(){
		return{
			//封装的倒计时需要的
			Areahours:0,//时
			Areaminutes:0,//分
			Areaseconds:0,//秒
		}
	},
}
//使用
countDown(){
	var time = 1234567000000;//活动结束的时间戳
	Areacountdown(time,this)
	.then(res =>{
		console.log('结束')
	})
}

多个倒计时的页面使用

import {Arrcountdown} from 'xxxxxxxx' //引入
data(){
	return{
		AllSetTime:'',//全页定时器的名字
		arrTime:[],//与数据对应的时间戳数组
		auctionList:[],//数据
	}
}


//拿到数据的方法里
var data = res.data.data;
for(let j=0;j<data.length;j++){
	data[j].Arrdays = 0;
	data[j].Arrhours = 0;
	data[j].Arrminutes = 0;
	data[j].Arrseconds = 0;
	this.arrTime.push(data[j].time);
}
this.auctionList = data;
clearInterval(this.AllSetTime);
Arrcountdown(this.arrTime,this);

你可能感兴趣的:(uni-app,vue,小程序,js)