欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)代碼實(shí)例

 更新時(shí)間:2019年03月27日 14:17:58   作者:jw19950424  
這篇文章主要介紹了vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

下面給出一個(gè)效果圖,我今天要說(shuō)的就是實(shí)現(xiàn)下圖這種多個(gè)倒計(jì)時(shí)

很多時(shí)候我們做只有一個(gè)倒計(jì)時(shí)的情況比較多,比較簡(jiǎn)單只需要一個(gè)定時(shí)器setInterval,算出來(lái)賦賦值就好,

但是需要多個(gè)倒計(jì)時(shí)的時(shí)候我們就要考慮把倒計(jì)時(shí)封裝成通用的方法了

拿我自己的vue項(xiàng)目舉個(gè)例

 <!-- template -->
 <div v-for="(item,index) in list" :key="index" class="act_item">
 <h1>{{ item.title }}</h1>
 <img :src="item.pic" alt="">
 <div class="act_info">
  <h2><span>{{ item.count }}</span>個(gè)視頻</h2>
  <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īng)說(shuō)你們想和明星超模同臺(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里沒(méi)有djs這個(gè)元素,直接object.djs = "要賦的值"這樣的做法是不正確的,可能會(huì)賦值成功,但是會(huì)出現(xiàn)很多奇怪的問(wèn)題,推薦用

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

以上所述是小編給大家介紹的vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue狀態(tài)管理庫(kù)Vuex的入門使用教程

    Vue狀態(tài)管理庫(kù)Vuex的入門使用教程

    Vuex是一個(gè)專門為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理庫(kù)。它采用了一個(gè)集中式的架構(gòu),將應(yīng)用程序的所有組件的狀態(tài)存儲(chǔ)在一個(gè)單獨(dú)的地方。這使得狀態(tài)的管理和維護(hù)變得更加容易
    2023-03-03
  • Vue+Antv?F2實(shí)現(xiàn)混合圖表

    Vue+Antv?F2實(shí)現(xiàn)混合圖表

    這篇文章主要為大家詳細(xì)介紹了Vue+Antv?F2實(shí)現(xiàn)混合圖表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue中axios的基本用法詳解

    Vue中axios的基本用法詳解

    axios 是一個(gè)基于promise用于瀏覽器和 nodejs 的 HTTP 客戶端,這篇文章主要介紹了Vue中axios的基本用法及axios的特征和使用注意細(xì)節(jié),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • vue-cli4項(xiàng)目開(kāi)啟eslint保存時(shí)自動(dòng)格式問(wèn)題

    vue-cli4項(xiàng)目開(kāi)啟eslint保存時(shí)自動(dòng)格式問(wèn)題

    這篇文章主要介紹了vue-cli4項(xiàng)目開(kāi)啟eslint保存時(shí)自動(dòng)格式的問(wèn)題小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-07-07
  • vue里input根據(jù)value改變背景色的實(shí)例

    vue里input根據(jù)value改變背景色的實(shí)例

    今天小編就為大家分享一篇vue里input根據(jù)value改變背景色的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • 關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問(wèn)題解析

    關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問(wèn)題解析

    這篇文章主要介紹了關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問(wèn)題解析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-04-04
  • vue+webpack dev本地調(diào)試全局樣式引用失效的解決方案

    vue+webpack dev本地調(diào)試全局樣式引用失效的解決方案

    今天小編就為大家分享一篇vue+webpack dev本地調(diào)試全局樣式引用失效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11
  • Vue實(shí)現(xiàn)Layui的集成方法步驟

    Vue實(shí)現(xiàn)Layui的集成方法步驟

    這篇文章主要介紹了Vue實(shí)現(xiàn)Layui的集成方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue 全局環(huán)境切換問(wèn)題

    vue 全局環(huán)境切換問(wèn)題

    小編在開(kāi)發(fā)使經(jīng)常會(huì)碰到全局切換問(wèn)題,今天小編給大家?guī)?lái)一篇教程給大家介紹vue 全局環(huán)境切換問(wèn)題,感興趣的朋友一起看看吧
    2019-10-10
  • Vue路由history模式解決404問(wèn)題的幾種方法

    Vue路由history模式解決404問(wèn)題的幾種方法

    這篇文章主要介紹了Vue路由history模式解決404問(wèn)題的幾種方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09

最新評(píng)論