下面給出一個(gè)效果圖,我今天要說的就是實(shí)現(xiàn)下圖這種多個(gè)倒計(jì)時(shí)
龍湖網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,龍湖網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為龍湖上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢,請(qǐng)找那個(gè)售后服務(wù)好的龍湖做網(wǎng)站的公司定做!
很多時(shí)候我們做只有一個(gè)倒計(jì)時(shí)的情況比較多,比較簡(jiǎn)單只需要一個(gè)定時(shí)器setInterval,算出來賦賦值就好,
但是需要多個(gè)倒計(jì)時(shí)的時(shí)候我們就要考慮把倒計(jì)時(shí)封裝成通用的方法了
拿我自己的vue項(xiàng)目舉個(gè)例
<!-- template --> <div v-for="(item,index) in list" :key="index" class="act_item"> <h2>{{ item.title }}</h2> <img :src="item.pic" alt=""> <div class="act_info"> <h3><span>{{ item.count }}</span>個(gè)視頻</h3> <div class="time">倒計(jì)時(shí):{{ item.djs }}</div> <div class="clear"></div> </div> </div>
<script> function InitTime(endtime){ var dd,hh,mm,ss = null; var time = parseInt(endtime) - new Date().getTime(); if(time<=0){ return '結(jié)束' }else{ dd = Math.floor(time / 60 / 60 / 24); hh = Math.floor((time / 60 / 60) % 24); mm = Math.floor((time / 60) % 60); ss = Math.floor(time % 60); var str = dd+"天"+hh+"小時(shí)"+mm+"分"+ss+"秒"; return str; } } export default { data () { return { active: 'tab-container1', pinkFont:true, // 上拉刷新、下拉加載 allLoaded: false, //如果為true,禁止上拉刷新 autoFill: false, //取消自動(dòng)填充, list: [], } }, created() { var ssss = [ {"title": "小心愿,大夢(mèng)想","pic":"../../assets/img/new/act1.jpg","count":"34","time":"1525293470350"}, {"title": "杭州國(guó)際時(shí)裝周童模招募","pic":"../../assets/img/new/act2.jpg","count":"36","time":"1525293470350"}, {"title": "怪獸bobo全線代言火爆杭城的聯(lián)名秀招募童模啦!","pic":"../../assets/img/new/act3.jpg","count":"74","time":"1529253270350"}, {"title": "漢風(fēng)唐韻 、別","pic":"../../assets/img/new/act2.jpg","count":"266","time":"1525753270350"}, {"title": "聽說你們想和明星超模同臺(tái)“PK”?","pic":"../../assets/img/new/act1.jpg","count":"97","time":"1525253270450"}, ]; 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 + "小時(shí)" + mm + "分" + ss + "秒"; } }, 1000); }, methods: { } } </script>
需要注意的是this.$set(obj,"djs",InitTime(obj.time)代碼,在一個(gè)對(duì)象已經(jīng)有了的情況下,假如此時(shí)object里沒有djs這個(gè)元素,直接object.djs = "要賦的值"這樣的做法是不正確的,可能會(huì)賦值成功,但是會(huì)出現(xiàn)很多奇怪的問題,推薦用
this.$set(object,'djs','要賦的值');
以上所述是小編給大家介紹的vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
本文名稱:vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)代碼實(shí)例
當(dāng)前鏈接:http://aaarwkj.com/article40/gooieo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站維護(hù)、云服務(wù)器、網(wǎng)站營(yíng)銷、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)