vue倒记时示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="timerrunning">{{day}}天{{hr}}:{{min}}:{{sec}}</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
day:0,
hr:0,
min:0,
sec:0
},
mounted:function(){
this.countdown()
},
methods:{
countdown: function(){
//定义结束时间戳
const end = Date.parse(new Date('2020-11-01 00:00:00'))
//定义当前时间戳
const now = Date.parse(new Date())
if(now>=end){
this.day=0
this.hr=0
this.min=0
this.sec=0
return
}
//用结束时间戳减去当前时间获得倒计时时间戳
const msec = end-now
let day=parseInt(msec/1000/60/60/24)//天数
let hr=parseInt(msec/1000/60/60%24)//小时
let min=parseInt(msec/1000/60%60)//分钟
let sec=parseInt(msec/1000%60)//秒数
//给数据赋值
this.day=day
this.hr=hr>9?hr:'0'+hr
this.min=min>9?min:'0'+min
this.sec=sec>9?sec:'0'+sec
//定义this指向
const that=this
//使用定时器,然后使用递归让每一次函数能调用自己达到倒计时效果
setTimeout(function(){
that.countdown()
},1000)
}
}
})
</script>
</body>
</html>