您的位置:首页 > 编程学习 > > 正文

vue计算两个日期差几分钟(vue实现同时设置多个倒计时)

更多 时间:2022-01-28 01:09:54 类别:编程学习 浏览量:1086

vue计算两个日期差几分钟

vue实现同时设置多个倒计时

本文实例为大家分享了vue实现同时设置多个倒计时的具体代码,供大家参考,具体内容如下

html如下:

  • <li class="home">
        <tbody>
          <tr v-for="(item, index) in bargainGoods" :key="index">
            <td v-text="item.down + Djs_timeList(item.countDown)"></td>
          </tr>
        </tbody>
    </li>
    
  • 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实现同时设置多个倒计时)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:vue 倒计时