frontend_h5/treegitee/components/counttime.vue

52 lines
1.1 KiB
Vue

<template>
<view>
{{cdTime}}
</view>
</template>
<script>
export default {
data() {
return {
cdTime:""
}
},
onLoad() {
let downTime = 5 //倒计时5分钟
let t = (new Date()).getTime() //当前时间戳
let dt = t + (downTime * 60) * 1000 //加了5分钟后的时间戳
let timer = setInterval(() => {
this.cdTime = countDown(dt); //cdtime为显示在页面的时间
if (countDown(dt) == 0) {
clearInterval(timer)
}
}, 1000)
},
methods: {
countDown(dt) {
let nowTime = (new Date()).getTime(); //实时时间戳
let times = (dt - nowTime) / 1000; //加分钟后的时间戳-实时时间戳
let minuter
let second
if (times >= 0) {
minuter = Math.floor(times / 60 % 60); //计算分钟
second = Math.floor(times % 60); //计算秒钟
if (minuter == 0 && second == 0) {
return 0
}
if (second.toString().split('').length < 2) { //秒补0
second = "0" + second
}
} else {
return 0
}
return "0" + minuter + ":" + second; //分补0并返回
}
}
}
</script>
<style>
</style>