vue实现同时设置多个倒计时
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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); } };
效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:vue使用节流函数的踩坑实例指南
下一篇:vue函数防抖与节流的正确使用方法