Vue implements setting multiple countdowns at the same time

This article example shares the specific code of Vue to set multiple countdowns at the same time for your reference. The specific content is as follows

The html is as follows:

<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 is as follows:

export default {
  data() {
    return {
      bargainGoods: [],
      total: 0,
      page: 1,
      serverTime: 0,
      timer: ""
      // hostUrl: this.$hostUrl
    };
  },
  //Used for data initialization created: function() {
    // Get data this.goods();
    // Get server time 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();//Call timer// The following is the start and end time of the background data returned by me, which is used for page display 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 = "";

                // End time 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 the end time is greater than the current time if (hour > _this.serverTime && startime < _this.serverTime) {
                  var hourtime = hour - _this.serverTime;
                  if (hourtime > 0) {
                    _this.bargainGoods[key].down = "End countdown:";
                    _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 = "Start countdown:";
                    _this.bargainGoods[key].countDown =
                      _this.bargainGoods[key].activityStartTime;
                  }
                } else {
                  _this.bargainGoods[key].down = "Ended";
                  _this.bargainGoods[key].countDown = "";
                }
                // console.log(_this.bargainGoods);
              }
            }
            _this.bargainGoods = _this.bargainGoods;
          }
        }
      });
    },
    // Get the server time 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) {
      // The date of itemEnd here is year, month, day, hour, minute, and second var endItem = new Date(itemEnd).getTime(); //Get the deadline passed in the list and convert it into a timestamp var nowItem = this.serverTime; //Get the current time var rightTime = endItem - nowItem; //Deadline minus current time if (rightTime > 0) {
        //Judge the remaining countdown time. If it is greater than 0, execute the countdown, otherwise end it. 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 + "day" + hh + "hour" + mm + "minute" + ss + "second";
      } else {
        var showTime = "";
      }
      return showTime;
    },

  },
    //Clear the timer after leaving the page destroyed() {
    clearInterval(this.timer);
  }
};

The effect is as follows:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue writes a simple countdown button function
Simple implementation of the 60-second countdown function of the vue verification code
Vue2.0 countdown plug-in (timestamp refresh jump is not affected)
SMS verification code countdown demo based on vue
Vue implements the countdown function of the verification code button
Multiple countdown implementation code examples in Vue
Vue implements the countdown function of the mall flash sale
Vue implements countdown to get verification code effect
Detailed explanation of designing a countdown component in Vue
Vue+canvas realizes a countdown plug-in with cool clock effects (a vue2 plug-in that has been published to npm and can be used out of the box)

<<: How to use docker to deploy Django technology stack project

>>: A quick solution to the first login failure in mysql5.7.20