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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
php实现将Session写入数据库
2015/07/26 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
pycharm修改file type方式
2019/11/19 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
幼儿园园长岗位职责
2013/11/26 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
简单租房协议书(范本)
2014/10/13 职场文书