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 相关文章推荐
js 编写规范
Mar 03 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
angular多语言配置详解
May 16 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
小程序调用微信支付的方法
Sep 26 Javascript
webpack HappyPack实战详解
Oct 08 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
php实现URL加密解密的方法
2016/11/17 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
Javascript中replace()小结
2015/09/30 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
python 实现登录网页的操作方法
2018/05/11 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python占用的内存优化教程
2019/07/28 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
师范生见习自我总结
2015/06/23 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书