<template>
<div class="hello">
{{time}}
{{times}}
</div>
</template>
<script>
import moment from 'moment'
export default {
data () {
return {
// time: Date.parse(new Date()), //精确到秒
time: (new Date()).valueOf(), // 获取到具体的毫秒值
// time: new Date().getTime(), //获取到具体的毫秒值
times: null
}
},
methods: {
// 此处转化时间戳
getTime () {
let s = new Date(this.time)
console.log(s, 's==')
// 转化时间
// 第一种方法 使用moment
this.times = moment(s).format('HH:mm:ss')
// 第二种方法 分别获取时分秒 其中使用到es6的新增语法padStart
// padStart()的常见用途是为数值补全指定位数 例如以下使用就是当不足两位时前面补0
// 其中还有padEnd() 常见用途为尾部补全
// 两种方法如果原字符串的长度,等于或者大于指定的最小长度,则返回原字符串,如果省略第二个参数,则返回空格
let hour = (s.getHours()).toString().padStart(2, '0')
let minutes = (s.getMinutes()).toString().padStart(2, '0')
let seconds = (s.getSeconds()).toString().padStart(2, '0')
console.log('当前时间为:' + hour + ':' + minutes + ':' + seconds)
},
// 倒计时
toTime () {
let sTime = new Date(this.time).valueOf()
setInterval(() => {
let sTime = new Date()
// let eTime = new Date('Feb 01 2022 00:00:00')
let eTime = new Date('Dec 10 2021 00:00:00')
let residue = eTime.getTime() - sTime.getTime()
let residueDay = parseInt(residue / (60 * 60 * 24 * 1000)).toString().padStart(2, '0')
let haomiao1 = parseInt(residue) - parseInt(residueDay * 60 * 60 * 1000) // 除去天的毫秒数
let residueHour = parseInt(haomiao1 / (60 * 60 * 1000)).toString().padStart(2, '0')
let haomiao2 = haomiao1 - residueHour * 60 * 60 * 1000 // 除去天/小时的毫秒数
let residueMinute = parseInt(haomiao2 / (60 * 1000)).toString().padStart(2, '0')
let haomiao3 = haomiao2 - residueMinute * 60 * 1000 // 除去天、小时、分的毫秒数
let haomiao4 = parseInt(haomiao3 / 1000) // 除去天、小时、分的毫秒数转化为秒
this.times = residueDay + '天' + residueHour + '小时' + residueMinute + '分钟' + haomiao4 + '秒'
}, 1000)
if (sTime < 0) {
this.times = '倒计时结束'
}
}
},
mounted () {
this.getTime()
this.toTime()
}
版权声明:本文为chaner_原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。