首先列表数组数据接口提供的。我们展示列表的时候要把倒计时(接口给的数据格式是时:分:秒)展示出来。首先想到的是写个定时器一秒钟访问一次接口。但是频繁访问接口会加重服务器的负担。我们可以再进入页面的时候访问一次。然后自己写定时器定时,到0的时候清除定时器。
首先接口给的倒计时时间是12:23:02。我们计算的时候先转换成时间戳:
let time= (e.split(":")[0])*3600000+(e.split(":")[1])*60000+(e.split(":")[2])*1000;
时间戳转为倒计时时间格式是12:23:02
const h = Math.floor(time / 1000 / 60 / 60 % 24)<10?('0'+Math.floor(time / 1000 / 60 / 60 % 24)):Math.floor(time / 1000 / 60 / 60 % 24),
m = Math.floor(time / 1000 / 60 % 60)<10?('0'+Math.floor(time / 1000 / 60 % 60)):Math.floor(time / 1000 / 60 % 60),
s = Math.floor(time / 1000 % 60)<10?('0'+Math.floor(time / 1000 % 60)):Math.floor(time / 1000 % 60);
let leftTime=h + ":" + m + ":" + s;
知道了这个时间,写个定时器每过一秒钟time减去一秒。就是倒计时在走啦。
function getEndTime(fn,e){ let time= (e.split(":")[0])*3600000+(e.split(":")[1])*60000+(e.split(":")[2])*1000;_timer = setInterval(()=>{ if (time <= 0) { // 倒计时结束 clearInterval(_timer); _timer=null; getPackagePirceFn();//这个是重新访问接口的函数 return; } time=time-1000; //把倒计时的时间戳转成时:分:秒的格式用于展示 const h = Math.floor(time / 1000 / 60 / 60 % 24)<10?('0'+Math.floor(time / 1000 / 60 / 60 % 24)):Math.floor(time / 1000 / 60 / 60 % 24), m = Math.floor(time / 1000 / 60 % 60)<10?('0'+Math.floor(time / 1000 / 60 % 60)):Math.floor(time / 1000 / 60 % 60), s = Math.floor(time / 1000 % 60)<10?('0'+Math.floor(time / 1000 % 60)):Math.floor(time / 1000 % 60); let leftTime=h + ":" + m + ":" + s; console.log(leftTime) fn&&fn(leftTime) },1000);}
调用
function (){
....访问接口获取接口数据data
data.forEach(res=>{
getEndTime(v1=>{
data[index].leftTime=v1; //把结果重新定义个变量leftTime接收
return res;
},res.time)//res.time就是接口提供的倒计时的时间
})
}