< div id= "app" >
<div class="main">
<div v-for="item in items" >
{{item.day}}{{item.hour}}{{item.minute}}{{item.second}}
</div>
</div> < / div >
< scrip >
var app = new Vue ({
el:"-sharpapp",
data:{
items: [
{day: " ", hour: " ", minute: " ", second: " "}
]
},
created:function(){
this.getMyTime();
this.start();
},
methods: {
format: function (n) {
return n < 10 ? "0" + n : n;
},
getMyTime: function () {
var startDate = new Date();
var endDate = new Date("2018/3/30 11:10:00");
var countDown = parseInt(endDate.getTime() - startDate.getTime()) / 1000;
var day = parseInt(countDown / (24 * 60 * 60));
var h = parseInt(countDown / (60 * 60) % 24);
var m = parseInt(countDown / 60 % 60);
var s = parseInt(countDown % 60);
this.items[0].day = day;
this.items[0].hour = this.format(h);
this.items[0].minute = this.format(m);
this.items[0].second = this.format(s);
},
start: function () {
var that = this;
var id = setInterval(function () {
that.getMyTime();
}, 500);
beforeDestroy: function () {
if (countDown <= 0) {
if (that.getMyTime()) {
clearInterval(that.getMyTime());
// console.log("");
}
}
}
}
})
< / scrip >
