如何在vue js html中将到期时间显示为报价的计时器?
Posted
技术标签:
【中文标题】如何在vue js html中将到期时间显示为报价的计时器?【英文标题】:How to show the expiry time as timer for an offer in vue js html? 【发布时间】:2018-08-05 12:48:16 【问题描述】:我的json数据是
"status": true, "data": ["offerId": 1, "postId": 81, "offer": "/offer/1517551392.618297_27073223_1691256130913694_2670312265146991358_n.jpg", "expiry": "2018-02-08T00:00:00Z", "offerId": 4, "postId": 81, "offer": "/offer/1519618809.4734359_1.jpg", "expiry": "2018-03-01T00:00:00Z", "offerId": 2, "postId": 79, "offer": "/offer/1519025622.8130004_Screenshot_21.png", "expiry": "2018-02-03T00:00:00Z", "offerId": 3, "postId": 79, "offer": "/offer/1519026074.7614043_Screenshot_26.png", "expiry": "2018-03-01T00:00:00Z"]
这些是我加载的报价。因此,每个优惠都有一个到期日。使用此到期数据和当前日期和时间,我需要显示一个计时器,以天、小时、分钟、秒为单位显示到期。
我怎样才能计算出相同的值。
我的vue js代码是
offers = new Vue(
el: '#offers',
data:
offer: ,
,
mounted()
var self = this; .
dat: ,
$.ajax(
url: "http://127.0.0.1:8000/alpha/get/offers/",
data: data,
type: "POST",
dataType: 'json',
success: function (e)
if (e.status == 1)
self.offer = e.data;
,
);
,
所以,我需要使用到期时间和当前日期和时间来实现一个计时器。请帮助我找到相同的解决方案。我的js代码很弱,请帮我解决一下?
我的html代码是
<div v-for="ofr in offer">
ofr.expiry
</div>
当我使用这个时,我可以加载到期时间,而不是这个,我怎样才能显示一个显示剩余时间的计时器?
【问题讨论】:
【参考方案1】:这个问题有点棘手,但我想出了这个解决方案。这可能不是最好的,但它确实有效。
回退是我在数组中添加了额外的数据,即expryTime
,将在您的v-for
迭代中调用。我为每个数据设置了1 sec
间隔刷新,因此每1 秒调用一次getExpiryCounter
方法来更新到期计数器。
检查并尝试下面的 sn-p:
var offers = new Vue(
el: '#offers',
data:
offer: [],
,
methods:
getExpiryCounter: function()
for (var idx in this.offer)
var timer = new Date(this.offer[idx].expiry).getTime() - new Date().getTime();
// get day
var day = timer / 1000 / 60 / 60 / 24;
// get hour
var hour = (day % 1) * 24;
// get min
var min = (hour % 1) * 60;
// get sec
var sec = (min % 1) * 60;
var appndDate = Math.floor(day) + 'D ' + Math.floor(hour) + 'H ' + Math.floor(min) + 'M ' + Math.floor(sec) + 'S '
if (timer < 0)
Vue.set(this.offer[idx], 'expryTime', 'Expired!');
else
Vue.set(this.offer[idx], 'expryTime', appndDate);
,
mounted: function()
this.offer = [
"offerId": 1,
"postId": 81,
"offer": "/offer/1517551392.618297_27073223_1691256130913694_2670312265146991358_n.jpg",
"expiry": "2018-02-08T00:00:00Z"
,
"offerId": 4,
"postId": 81,
"offer": "/offer/1519618809.4734359_1.jpg",
"expiry": "2018-03-01T00:00:00Z"
,
"offerId": 2,
"postId": 79,
"offer": "/offer/1519025622.8130004_Screenshot_21.png",
"expiry": "2018-02-03T00:00:00Z"
,
"offerId": 3,
"postId": 79,
"offer": "/offer/1519026074.7614043_Screenshot_26.png",
"expiry": "2018-03-01T00:00:00Z"
];
var self = this;
setInterval(function()
self.getExpiryCounter();
, 1000)
)
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="offers">
<div v-for="ofr in offer">
ofr.expryTime
</div>
</div>
【讨论】:
我很高兴能帮助@Wanderer以上是关于如何在vue js html中将到期时间显示为报价的计时器?的主要内容,如果未能解决你的问题,请参考以下文章