vue实现同时设置多个倒计时
本文实例为大家分享了vue实现同时设置多个倒计时的具体代码,供大家参考,具体内容如下
html如下:
<div class="home">
<tbody>
<tr v-for="(item, index) in bargainGoods" :key="index">
<td v-text="item.down + Djs_timeList(item.countDown)"></td>
</tr>
</tbody>
</div>
js如下:
export default {
data() {
return {
bargainGoods: [],
total: 0,
page: 1,
serverTime: 0,
timer: ""
// hostUrl: this.$hostUrl
};
},
//用于数据初始化
created: function() {
// 获取数据
this.goods();
// 获取服务器时间
this.findServiceTime();
},
methods: {
goods: function() {
var _this = this;
_this.$axios({
url: "goods/pageGoods",
data: {
current: -1,
activityStatus: "",
limit: -1,
status: "SALE"
},
success: response => {
_this.bargainGoods = response.items;
_this.Djs_time();// 调用定时器
// 以下是我处理的后台返回数据 开始时间和结束时间,页面显示用的
if (_this.bargainGoods.length != 0) {
for (var key in _this.bargainGoods) {
var hour = 0;
var startime = 0;
if (_this.bargainGoods[key] != null) {
_this.bargainGoods[key].countDown = "";
_this.bargainGoods[key].down = "";
// 结束时间
hour = _this.bargainGoods[key].overTime;
startime = _this.bargainGoods[key].activityStartTime;
hour = hour.replace(/-/g, "/");
hour = new Date(hour).getTime();
startime = startime.replace(/-/g, "/");
startime = new Date(startime).getTime();
// 如果结束时间大于当前时间
if (hour > _this.serverTime && startime < _this.serverTime) {
var hourtime = hour - _this.serverTime;
if (hourtime > 0) {
_this.bargainGoods[key].down = "结束倒计时:";
_this.bargainGoods[key].countDown =
_this.bargainGoods[key].overTime;
}
} else if (startime > _this.serverTime) {
var starhourtime = startime - _this.serverTime;
if (starhourtime > 0) {
_this.bargainGoods[key].down = "开始倒计时:";
_this.bargainGoods[key].countDown =
_this.bargainGoods[key].activityStartTime;
}
} else {
_this.bargainGoods[key].down = "已结束";
_this.bargainGoods[key].countDown = "";
}
// console.log(_this.bargainGoods);
}
}
_this.bargainGoods = _this.bargainGoods;
}
}
});
},
// 获取服务器时间
findServiceTime() {
var _this = this;
_this.$axios({
url: "serverTime/getDateTime",
success: function(res) {
_this.serverTime = res.item;
}
});
},
Djs_time: function() {
this.timer = setInterval(() => {
this.serverTime = this.serverTime + 1000;
}, 1000);
},
Djs_timeList: function(itemEnd) {
// 此处 itemEnd 的日期是年月日时分秒
var endItem = new Date(itemEnd).getTime(); //获取列表传的截止时间,转成时间戳
var nowItem = this.serverTime; //获取当前时间
var rightTime = endItem - nowItem; //截止时间减去当前时间
if (rightTime > 0) {
//判断剩余倒计时时间如果大于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);
var showTime = dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
} else {
var showTime = "";
}
return showTime;
},
},
//离开页面后清除定时器
destroyed() {
clearInterval(this.timer);
}
};
效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
以上是 vue实现同时设置多个倒计时 的全部内容, 来源链接: utcz.com/p/220532.html