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性能优化28条建议你值得借鉴
Feb 16 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
python的else子句使用指南
2016/02/27 Python
Python实现两款计算器功能示例
2017/12/19 Python
python使用matplotlib绘制热图
2018/11/07 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
浅析Python __name__ 是什么
2020/07/07 Python
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
港湾网络笔试题
2014/04/19 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
会计专业自荐信范文
2013/12/02 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
消防安全检查制度
2014/02/04 职场文书
个人自我评价范文
2014/02/05 职场文书
火车的故事教学反思
2014/02/11 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
三孔导游词
2015/02/05 职场文书
小学中队长竞选稿
2015/11/20 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
MySQL中order by的执行过程
2022/06/05 MySQL
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android