欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

vue中多個倒計時實現(xiàn)代碼實例

下面給出一個效果圖,我今天要說的就是實現(xiàn)下圖這種多個倒計時

龍湖網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,龍湖網(wǎng)站設(shè)計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為龍湖上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢,請找那個售后服務(wù)好的龍湖做網(wǎng)站的公司定做!

vue中多個倒計時實現(xiàn)代碼實例

很多時候我們做只有一個倒計時的情況比較多,比較簡單只需要一個定時器setInterval,算出來賦賦值就好,

但是需要多個倒計時的時候我們就要考慮把倒計時封裝成通用的方法了

拿我自己的vue項目舉個例

 <!-- 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>個視頻</h3>
  <div class="time">倒計時:{{ 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+"小時"+mm+"分"+ss+"秒";
 return str;
 }
}
export default {
 data () {
	return {
  active: 'tab-container1',
  pinkFont:true,
  // 上拉刷新、下拉加載
  allLoaded: false, //如果為true,禁止上拉刷新
  autoFill: false, //取消自動填充,
  list: [],
 	}
 },
 created() {
 var ssss = [
  {"title": "小心愿,大夢想","pic":"../../assets/img/new/act1.jpg","count":"34","time":"1525293470350"},
  {"title": "杭州國際時裝周童模招募","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": "漢風唐韻 、別","pic":"../../assets/img/new/act2.jpg","count":"266","time":"1525753270350"},
  {"title": "聽說你們想和明星超模同臺“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 + "小時" + mm + "分" + ss + "秒";
  }
 }, 1000);
 
 },
 methods: {
 
 }
}
</script>

需要注意的是this.$set(obj,"djs",InitTime(obj.time)代碼,在一個對象已經(jīng)有了的情況下,假如此時object里沒有djs這個元素,直接object.djs = "要賦的值"這樣的做法是不正確的,可能會賦值成功,但是會出現(xiàn)很多奇怪的問題,推薦用

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

以上所述是小編給大家介紹的vue中多個倒計時實現(xiàn)詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!

本文名稱:vue中多個倒計時實現(xiàn)代碼實例
當前鏈接:http://www.chinadenli.net/article40/gooieo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站面包屑導(dǎo)航網(wǎng)站維護云服務(wù)器網(wǎng)站營銷自適應(yīng)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)