vue實現(xiàn)同時設(shè)置多個倒計時
更新時間:2021年05月20日 17:13:06 作者:保持微笑ヽ繼續(xù)我旳驕傲
這篇文章主要為大家詳細介紹了vue實現(xiàn)同時設(shè)置多個倒計時,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)同時設(shè)置多個倒計時的具體代碼,供大家參考,具體內(nèi)容如下
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 }; }, //用于數(shù)據(jù)初始化 created: function() { // 獲取數(shù)據(jù) this.goods(); // 獲取服務(wù)器時間 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();// 調(diào)用定時器 // 以下是我處理的后臺返回數(shù)據(jù) 開始時間和結(jié)束時間,頁面顯示用的 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 = ""; // 結(jié)束時間 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(); // 如果結(jié)束時間大于當(dāng)前時間 if (hour > _this.serverTime && startime < _this.serverTime) { var hourtime = hour - _this.serverTime; if (hourtime > 0) { _this.bargainGoods[key].down = "結(jié)束倒計時:"; _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 = "已結(jié)束"; _this.bargainGoods[key].countDown = ""; } // console.log(_this.bargainGoods); } } _this.bargainGoods = _this.bargainGoods; } } }); }, // 獲取服務(wù)器時間 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(); //獲取列表傳的截止時間,轉(zhuǎn)成時間戳 var nowItem = this.serverTime; //獲取當(dāng)前時間 var rightTime = endItem - nowItem; //截止時間減去當(dāng)前時間 if (rightTime > 0) { //判斷剩余倒計時時間如果大于0就執(zhí)行倒計時否則就結(jié)束 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); } };
效果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。