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

回到顶部