溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
下面給出一個效果圖，我今天要說的就是實現下圖這種多個倒計時
很多時候我們做只有一個倒計時的情況比較多，比較簡單只需要一個定時器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 '結束'
}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全線代言火爆杭城的聯名秀招募童模啦！","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)代碼，在一個對象已經有了的情況下，假如此時object里沒有djs這個元素，直接object.djs = "要賦的值"這樣的做法是不正確的，可能會賦值成功，但是會出現很多奇怪的問題，推薦用
this.$set(object,'djs','要賦的值');
以上所述是小編給大家介紹的vue中多個倒計時實現詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
