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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
js 求时间差的实现代码
Apr 26 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
原生JS实现天气预报
Jun 16 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
短波的认识
2021/03/01 无线电
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
php中如何执行linux命令详解
2018/11/06 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
Python和Sublime整合过程图示
2019/12/25 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
医学毕业生自荐信
2013/10/11 职场文书
教学实验楼管理制度
2014/02/01 职场文书
厂长岗位职责
2014/02/19 职场文书
农林环境专业求职信
2014/03/13 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
新闻简讯格式及范文
2015/07/22 职场文书