vue2.0倒计时，vue2.0 js 倒计时，vue倒计时
vue倒计时demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div>
<ul id="el">
<li v-for="item in list">{{ item.jishi }}</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#el',
//数据
data: {
list:[
{
id:1,
time:565454
},
{
id:2,
time:1844
},
{
id:3,
time:554
},
]
},
//方法体
methods:
{
num: function (n) {
return n < 10 ? '0' + n : '' + n
},
timeToData:function ( maxtime ) {
second = Math.floor( maxtime % 60); //计算秒
minite = Math.floor((maxtime / 60) % 60); //计算分
hour = Math.floor((maxtime / 3600) % 24 ); //计算小时
day = Math.floor((maxtime / 3600) / 24);//计算天
return day+'天'+this.num(hour)+'时'+this.num(minite)+'分'+this.num(second)+'秒';
},
getTime:function () {
var that = this;
setInterval(function ()
{
that.list.forEach(function (value) {
var shijian = that.timeToData(value.time);
if( typeof value.jishi == 'undefined' )
{
that.$set(value,'jishi',shijian);
}else
{
value.jishi = shijian;
}
if( value.time )
{
-- value.time;
}else
{
value.time = 0;
}
})
}, 1000);
}
},
//页面打开渲染之前就调用
created: function () {
var that = this;
that.getTime();
}
});
</script>
</html>本文由：xiaoshu168 作者：xiaoshu发表，转载请注明来源！