您的位置：首页 > Web前端 > Vue.js

vue中多个倒计时实现代码实例

2019-04-22 18:02 936 查看

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

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

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

拿我自己的vue项目举个例

<!-- 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>个视频</h2>
<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中多个倒计时实现详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航