评论

单页面多个跳动的倒计时器

实现单页面出现的多个不同的倒计时器

最近写了一个活动列表,列表展示中有一个活动倒计时,开始挺迷茫的,一点思路都没有,在社区也发了帖子求帮助,(在这里感谢热心的家人们提出宝贵的意见),最后还算是成功计算出来了

在这里分享一下,大伙能用到的话就当提供了一个帮助(不喜勿喷

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 //把每一次计算的结果付给空数组
    }
  }
}


以上就是这次的分享,有可以改进的地方,大伙自由发挥(不喜勿喷

最后一次编辑于  2021-12-01  
点赞 4
收藏
评论

1 个评论

  • TNT
    TNT
    2021-12-01

    单页面多个。可以写成组件。各个组件维护自己的倒计时。传入倒计时的秒数。组件内处理展示。

    2021-12-01
    赞同
    回复
登录 后发表内容