单页面多个跳动的倒计时器
最近写了一个活动列表,列表展示中有一个活动倒计时,开始挺迷茫的,一点思路都没有,在社区也发了帖子求帮助,(在这里感谢热心的家人们提出宝贵的意见),最后还算是成功计算出来了
在这里分享一下,大伙能用到的话就当提供了一个帮助(不喜勿喷)
html
<text>{{gTime[0].day}}</text>天<text>{{gTime[0].hou}}</text>:<text>{{gTime[0].min}}</text>:<text>{{gTime[0].sec}}</text>
<!-- 这里我只渲染第一个结果 -->
js
data() {
return {
timer: null, //让方法无限循环
gTime: [], //空数组
bTime: {day: '',hou: '',min: '',sec: ''} //每一次计算的倒计时结果整合
}
},
onLoad(option) {
this.timer = setInterval(()=>{
this.add() //倒计时
},1000);
},
methods: {
add(){
let nowtime = new Date(), //获取当前时间
jstime,lefttime,lefda,lefth,leftm,lefts
for (var i = 0; i < this.endtime.length; i++) {
this.bTime = {day: '',hou: '',min: '',sec: ''}
jstime = new Date(this.endtime[i]); //定义结束时间 this.endtime是已经拿到的一个装有无数个结束时间的数组
lefttime = (jstime.getTime() - nowtime.getTime())/1000 //距离结束时间的毫秒数
if (lefttime <= 0) lefttime = 0 //判断一下活动时候到期
lefda = parseInt(lefttime/(24*60*60)) //计算天
lefth = parseInt(lefttime/(60*60)%24) //计算小时数
leftm = parseInt(lefttime/60)%60 //计算分钟数
lefts = parseInt(lefttime%60) //计算秒数
//为了美观考虑,如果是单位数就在其前面加一个 0
if (lefda < 10) this.bTime.day = '0' + lefda; //返回时
else this.bTime.day = lefda;
if (lefth < 10) this.bTime.hou = '0' + lefth; //返回时
else this.bTime.hou = lefth;
if (leftm < 10) this.bTime.min = '0' + leftm; //返回分
else this.bTime.min = leftm;
if (lefts < 10) this.bTime.sec = '0' + lefts; //返回秒
else this.bTime.sec = lefts;
this.gTime[i] = this.bTime //把每一次计算的结果付给空数组
}
}
}
以上就是这次的分享,有可以改进的地方,大伙自由发挥(不喜勿喷)