如何在vue js html中将到期时间显示为报价的计时器？

Posted 2023-02-22

【中文标题】如何在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