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 相关文章推荐
javascript计算用户打开网页的停留时间
Jan 09 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
Vue关于组件化开发知识点详解
May 13 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
jquery radio 操作代码
2011/03/16 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
python中正则表达式的使用详解
2014/10/17 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
python实现ID3决策树算法
2017/12/20 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
Python中的流程控制详解
2021/02/18 Python
python利用opencv实现颜色检测
2021/02/23 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
餐厅经理岗位职责范本
2014/02/17 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
导游词范文
2015/02/13 职场文书
在Django中使用MQTT的方法
2021/05/10 Python