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-router定义元信息meta操作
Dec 07 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
详解Python自建logging模块
2018/01/29 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
应届生人事助理求职信
2013/11/09 职场文书
心理健康教育心得体会
2013/12/29 职场文书
个人收入证明范本
2015/06/12 职场文书
红色电影观后感
2015/06/18 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
详解flex:1什么意思
2022/07/23 HTML / CSS