可以做小程序的网站_vue中多个倒计时完成代码实例

vue中多个倒计时实现代码实例       这篇文章主要介绍了vue中多个倒计时实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

下面给出一个效果图,我今天要说的就是实现下图这种多个倒计时

很多时候我们做只有一个倒计时的情况比较多,比较简单只需要一个定时器setInterval,算出来赋赋值就好,

但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了

拿我自己的vue项目举个例

 !-- template -- 
 div v-for="(item,index) in list" :key="index" 
 h1 {{ item.title }} /h1 
 img :src="item.pic" alt="" 
 div 
 h2 span {{ item.count }} /span 个视频 /h2 
 div 倒计时:{{ item.djs }} /div 
 div /div 
 /div 
 /div 

var ssss = [ {"title": "小心愿,大梦想","pic":"../../assets/img/new/act1.jpg","count":"34","time":"50"}, {"title": "杭州国际时装周童模招募","pic":"../../assets/img/new/act2.jpg","count":"36","time":"50"}, {"title": "怪兽bobo全线代言火爆杭城的联名秀招募童模啦!","pic":"../../assets/img/new/act3.jpg","count":"74","time":"50"}, {"title": "汉风唐韵 、别","pic":"../../assets/img/new/act2.jpg","count":"266","time":"50"}, {"title": "听说你们想和明星超模同台“PK”?","pic":"../../assets/img/new/act1.jpg","count":"97","time":"50"}, ssss.map( (obj,index)= { this.$set( obj,"djs",InitTime(obj.time) this.list = ssss; mounted() { setInterval( ()= { for (var key in this.list) { var aaa = parseInt( this.list[key]["time"] ); var bbb = new Date().getTime(); var rightTime = aaa - bbb; if (rightTime 0) { var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24); var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24); var mm = Math.floor((rightTime / 1000 / 60) % 60); var ss = Math.floor((rightTime / 1000) % 60); this.list[key]["djs"] = dd + "天" + hh + "小时" + mm + "分" + ss + "秒"; }, 1000); methods: { /script

需要注意的是this.$set(obj,"djs",InitTime(obj.time)代码,在一个对象已经有了的情况下,假如此时object里没有djs这个元素,直接object.djs = "要赋的值"这样的做法是不正确的,可能会赋值成功,但是会出现很多奇怪的问题,推荐用

this.$set(object,'djs','要赋的值');

以上所述是小编给大家介绍的vue中多个倒计时实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


相关阅读