最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

vue倒计时:天时分秒

IT培训 admin 1浏览 0评论

vue倒计时:天时分秒

<p>倒计时:{{day}}天 {{hour}}:{{min}}:{{second}}</p>
data () {return {curStartTime: '2019-07-31 08:00:00',day: '0',hour: '00',min: '00',second: '00',}
},
// 倒计时
countTime () {// 获取当前时间let date = new Date()let now = date.getTime()// 设置截止时间let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期let end = endDate.getTime()// 时间差let leftTime = end - now// 定义变量 d,h,m,s保存倒计时的时间if (leftTime >= 0) {// 天this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)// 时let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)this.hour = h < 10 ? '0' + h : h// 分let m = Math.floor(leftTime / 1000 / 60 % 60)this.min = m < 10 ? '0' + m : m// 秒let s = Math.floor(leftTime / 1000 % 60)this.second = s < 10 ? '0' + s : s} else {this.day = 0this.hour = '00'this.min = '00'this.second = '00'}// 等于0的时候不调用if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {return} else {// 递归每秒调用countTime方法,显示动态时间效果,setTimeout(this.countTime, 1000)}
}, 
this.countTime()

vue倒计时:天时分秒

<p>倒计时:{{day}}天 {{hour}}:{{min}}:{{second}}</p>
data () {return {curStartTime: '2019-07-31 08:00:00',day: '0',hour: '00',min: '00',second: '00',}
},
// 倒计时
countTime () {// 获取当前时间let date = new Date()let now = date.getTime()// 设置截止时间let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期let end = endDate.getTime()// 时间差let leftTime = end - now// 定义变量 d,h,m,s保存倒计时的时间if (leftTime >= 0) {// 天this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)// 时let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)this.hour = h < 10 ? '0' + h : h// 分let m = Math.floor(leftTime / 1000 / 60 % 60)this.min = m < 10 ? '0' + m : m// 秒let s = Math.floor(leftTime / 1000 % 60)this.second = s < 10 ? '0' + s : s} else {this.day = 0this.hour = '00'this.min = '00'this.second = '00'}// 等于0的时候不调用if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {return} else {// 递归每秒调用countTime方法,显示动态时间效果,setTimeout(this.countTime, 1000)}
}, 
this.countTime()

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论