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页面顶部卷动广告效果
Dec 01 Javascript
DOM 基本方法
Jul 18 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
JavaScript 的继承
Oct 01 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
解决vue移动端适配问题
Dec 12 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
收藏的一个php小偷的核心程序
2007/04/09 PHP
php存储过程调用实例代码
2013/02/03 PHP
php实现paypal 授权登录
2015/05/28 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
如何用python整理附件
2018/05/13 Python
django加载本地html的方法
2018/05/27 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
人事部主管岗位职责
2013/12/26 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
大学生十八大感想
2015/08/11 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python