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


Posted in Vue.js onMay 20, 2021

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

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
    };
  },
  //用于数据初始化
  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.js 相关文章推荐
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
Vue和Flask通信的实现
Vue Element UI自定义描述列表组件
使用这 6个Vue加载动画库来减少我们网站的跳出率
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
详解vue中v-for的key唯一性
解读Vue组件注册方式
May 15 #Vue.js
如何理解Vue简单状态管理之store模式
May 15 #Vue.js
You might like
PHP中的Streams详细介绍
2014/11/12 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
Array对象方法参考
2006/10/03 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
团员的自我评价
2013/12/01 职场文书
车辆安全检查制度
2014/01/12 职场文书
八项规定整改方案
2014/02/21 职场文书
库房管理员岗位职责
2014/03/09 职场文书
党建工作经验交流材料
2014/05/25 职场文书
植树节口号
2014/06/21 职场文书