首页 > 其他 > 详细

vue每天指定时间倒计时

时间:2021-01-10 22:41:59      阅读:229      评论:0      收藏:0      [点我收藏+]

目的:每天中午12:00开始,动态显示倒计时

export defalut {
  name: ‘ ‘,
  data () {
     timeObj: { 
       h: null,
       m: null,
       s: null 
     },
leftCount: 0 //倒计时变量 }, methods:{ time(){ end = new Date(new Date().toLocaleDateString()).getTime() + 12 * 60 * 60 * 1000 //获取每天凌晨时间戳加上12个小时的时间戳
now = new Date().getTime() //获取当前时间戳
    this.leftCount = end - now // 获取倒计时时间戳

        this.timeObj.h = Math.floor(this.leftCount / 1000 / 60 / 60 % 24) //获取小时
        this.timeObj.m = Math.floor(this.leftCount / 1000 / 60 % 60) //获取分钟
        this.timeObj.s = Math.floor(this.leftCount / 1000 % 60) //获取秒     

        if (this.leftCount <= 0) {
          const endtwo = end + 24 * 60 * 60 * 1000 //这里是每天12:00的时间戳
          this.leftCount = endtwo - now // 重新赋值一次是因为倒计时归0时,leftCount是一个负值,而且倒计时时间变成了第二天的12:00,所以需要重新赋值一次leftCount

      //这里其实可以单独封装成一个函数进行调用,跟上面的代码一样的,leftCount既然已经重新赋值了timeObj也要重新进行赋值
          this.timeObj.h = Math.floor(this.leftCount / 1000 / 60 / 60 % 24) //获取小时
          this.timeObj.m = Math.floor(this.leftCount / 1000 / 60 % 60) //获取分钟
          this.timeObj.s = Math.floor(this.leftCount / 1000 % 60) //获取秒 
        }

    },
openTime () { //倒计时:每一秒减一秒
setTiemout( () => {
leftCount -= 1000
}, 1000)
}
},

    created () {
      this.time()
      this.openTime()
    }

}

   

// 个位数前补零
// hour = hour > 9 ? hour : ‘0‘ + hour

 

vue每天指定时间倒计时

原文:https://www.cnblogs.com/black-eyes/p/14259168.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!