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发表,转载请注明来源!