vue超时计算的组件实例代码


Posted in Javascript onJuly 09, 2018

需要对预约单进行超时计算,但是后台和客户端时间不能保证一定一直,所以后台返回客户提交时间和请求结束时间的时间差进行计算。

 效果如下(此处只是demo效果,所以有点丑。)

vue超时计算的组件实例代码

父页面

<template>
  <div>
    <div class="dateDiv" :key="index" v-for="(item,index) in TimeArray">
      <p>{{item.name}}</p>
      <dateComponent :index="index" :key="item.timeDif" ref="dateComponent" :dateTimeStamp="item.timeDif"></dateComponent>
      <el-button @click="delUnit(index)">删除</el-button>
    </div>
  </div>
</template>
<script>
import datajson from '../index/data.json'
import dateComponent from './dateComponent'
export default {
  name:'timestamp',
  components:{
    dateComponent
  },
  data(){
    return {
      TimeArray: datajson.timestamp.TimeArray
      /*
  "timestamp":{
   "TimeArray":[{
    "name":"预约单2",
    "timeDif":"855000"
   },{
    "name": "预约单2",
    "timeDif": "801000"
   },{
    "name": "预约单3",
    "timeDif": "95000"
   },{
    "name": "预约单4",
    "timeDif": "45000"
   },{
    "name": "预约单5",
    "timeDif": "495000"
   },{
    "name": "预约单6",
    "timeDif": "195000"
   }]
  }
      */
    }
  },
  methods:{
    delUnit:function (index) {
      this.TimeArray.splice(index,1)
    }
  }
}
</script>
<style scoped>
.dateDiv{
  display: inline-block;
  border: 1px solid #e5e5e5;
  width: 200px;
  height: 80px;;
}
</style>

超时计算组件 overtimeComponent.vue

<template>
  <div>
    <span>{{formatTimeStamp}}</span>
  </div>
</template>
<script>
export default {
props:["dateTimeStamp","index"],
name:'dateComponent',
data(){
  return {
    flag:false,
    formatTimeStamp:"",
    interval : ""
  }
},
mounted() {
  var difValue = parseInt(this.dateTimeStamp);
  this.formatTimeStamp = this.setResultStr(difValue)
  this.interval = setInterval(() => {
    difValue += 1000
    this.formatTimeStamp = this.setResultStr(difValue)
  }, 1000);
},
beforeDestroy (){
  clearInterval(this.interval)
},
methods:{
  setResultStr:function (difValue) {
    var day = Math.floor(difValue / 1000 / 60 / 60 / 24);//天
    difValue = difValue % (1000 * 60 * 60 * 24);
    var hour = Math.floor(difValue / 1000 / 60 / 60);//小时
    difValue = difValue % (1000 * 60 * 60);
    var min = Math.floor(difValue / 1000 / 60);//分钟
    difValue = difValue % (1000 * 60);
    var second = Math.floor(difValue / 1000);
    if(day === 0 && hour==0 && min == 0){
      return "超时:" + second + "秒"
    }else if(day === 0 && hour==0){
      return "超时:" + min + "分" + second + "秒"
    }else if(day === 0){
      return "超时:" + hour + "小时" + min + "分" + second + "秒"
    }else{
      return "超时:" + day + "天" + hour + "小时" + min + "分" + second + "秒"
    }
  }
}
}
</script>
<style scoped>
</style>

总结

以上所述是小编给大家介绍的vue超时计算的组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
微信小程序自定义底部弹出框
Nov 16 #Javascript
详解vue中组件参数
Jul 09 #Javascript
微信小程序实现手指触摸画板
Jul 09 #Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 #Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 #Javascript
js中Object.defineProperty()方法的不详解
Jul 09 #Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 #Javascript
You might like
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Python装饰器用法实例总结
2018/02/07 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
python unichr函数知识点总结
2020/12/16 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
父亲生日宴会答谢词
2014/01/10 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
详解MindSpore自定义模型损失函数
2021/06/30 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
Window server中安装Redis的超详细教程
2021/11/17 Redis