本文实例为大家分享了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写一个简单的倒计时按钮功能
- 简单实现vue验证码60秒倒计时功能
- vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
- 基于vue的短信验证码倒计时demo
- vue实现验证码按钮倒计时功能
- vue中多个倒计时实现代码实例
- vue实现商城秒杀倒计时功能
- vue实现倒计时获取验证码效果
- vue设计一个倒计时秒杀的组件详解
- vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
本文由 华域联盟 原创撰写:华域联盟 » vue实现同时设置多个倒计时
转载请保留出处和原文链接:https://www.cnhackhy.com/65662.htm