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 相关文章推荐
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
jQuery each函数源码分析
May 25 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
js+css实现红包雨效果
Jul 12 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
JS实现随机点名器
Apr 12 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
微信小程序自定义底部弹出框
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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
javascript动态创建对象的属性详解
2018/11/07 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
js实现小时钟效果
2020/03/25 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
Python 装饰器深入理解
2017/03/16 Python
Python实现翻转数组功能示例
2018/01/12 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
编辑找工作求职信范文
2013/12/16 职场文书
法律系毕业生求职信
2014/05/28 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers