vue中倒计时组件的实例代码


Posted in Javascript onJuly 06, 2018

子组件:

<template> 
 <span :endTime="endTime" :callback="callback" :endText="endText"> 
  <slot> 
   {{content}} 
  </slot> 
 </span> 
</template> 
<script> 
 export default { 
  data(){ 
   return { 
   content: '', 
   } 
  }, 
  props:{ 
   endTime:{ 
    type: String, 
    default :'' 
   }, 
   endText:{ 
    type : String, 
    default:'已结束' 
   }, 
   callback : { 
    type : Function, 
    default :'' 
   } 
  }, 
  mounted () { 
   this.countdowm(this.endTime) 
  }, 
  methods: { 
   countdowm(timestamp){ 
   let self = this; 
   let timer = setInterval(function(){ 
    let nowTime = new Date(); 
    let endTime = new Date(timestamp * 1000); 
    let t = endTime.getTime() - nowTime.getTime(); 
    if(t>0){ 
     let day = Math.floor(t/86400000); 
     let hour=Math.floor((t/3600000)%24); 
     let min=Math.floor((t/60000)%60); 
     let sec=Math.floor((t/1000)%60); 
     hour = hour < 10 ? "0" + hour : hour; 
     min = min < 10 ? "0" + min : min; 
     sec = sec < 10 ? "0" + sec : sec; 
     let format = ''; 
     if(day > 0){ 
      format = `${day}天${hour}小时${min}分${sec}秒`; 
     }  
     if(day <= 0 && hour > 0 ){ 
      format = `${hour}小时${min}分${sec}秒`;  
     } 
     if(day <= 0 && hour <= 0){ 
      format =`${min}分${sec}秒`; 
     } 
     self.content = format; 
     }else{ 
      clearInterval(timer); 
      self.content = self.endText; 
      self._callback(); 
     } 
     },1000); 
    }, 
    _callback(){ 
    if(this.callback && this.callback instanceof Function){ 
      this.callback(...this); 
     } 
   } 
  } 
 } 
</script>

父组件:

<count-down endTime="1590761620" :callback="callback" endText="已经结束了"></count-down> 
methods:{
callback:function(){
}
}

总结

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

Javascript 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 Javascript
微信小程序websocket实现聊天功能
Mar 30 #Javascript
vue中锚点的三种方法
Jul 06 #Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 #Javascript
详解Angular如何正确的操作DOM
Jul 06 #Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 #Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 #Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 #Javascript
You might like
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python制作简单五子棋游戏
2019/06/18 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
工程业务员岗位职责
2013/12/31 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript